我想将我的所有文本移到一定程度,但我不想将其居中。我将在代码中添加或修复哪些内容以使其成为可能?我希望h2,h3和p与当前h2在菜单旁边的位置对齐。很抱歉,如果您不明白我要问的问题。提前谢谢。
body
{
background-color:#333;
color:#999
font: 12px/1.4em Arial,sans-serif;
}
#wrap
{
margin-left: 10px auto;
background: black;
padding:10px;
width: 100px;
float:left;
}
#header
{
background-color:black;
color: #fff;
}
#logo
{
float: center;
font-size: 30px;
line-height:0px;
padding: 5px;
}
#navWrap
{
height:50px;
float:center;
}
#nav ul
{
margin: 1px;
padding:1px;
float:left;
}
#nav li
{
float:left;
padding: 5px;
background-color: black;
margin: 0 5px;
color: white;
list-style-type: none
}
#nav li a
{
color:white;
text-decoration: none;
font-size: 15px;
float:left;
text-indent:0px;
}
#nav li a:hover
{
text-decoration: underline;
float:left;
}
br.clearLeft
{
clear: left;
}
h1
{
color:cyan;
text-align:center;
border-bottom: double 5px;
}
h2
{
color:red;
}
h3
{
color:cyan;
}
p
{
color:#DBDBDB;
font-size:22px;
}
<body>
<div id="wrap">
<div id="header">
<div id="logo"></div>
<div id="navWrap">
<div id="nav">
<ul>
<li><a href="x" ; class="smothScroll">Home</a></li>
<li><a href="xl" ; class="smothScroll">About</a></li>
<li><a href="x" ; class="smothScroll">My Tumblr</a></li>
</ul>
</div>
</div>
</div>
</div>
<h1>x</h1>
<h2>x</h2>
<hr>
<p>x</p>
<p>x</br>xe</br>x</br>Lx</p>
<p>Rxy</br>x</br>x</br>x</p>
<p>Rx</br>x x</br>x</br>x</p>
<p>x</br>xarex</br>Ix</br>M</p>
最佳答案
您可以向body
添加填充,例如
body {
padding-left: 120px;
/* this "moves" the content inside body 120px to the right (120 = 100 + padding 2*10) */
}
如果您需要现在的
wrap
元素,只需添加一个负边距,然后#wrap {
margin-left: -110px;
/* -90px because it was originally 10px, so you need to substract 120px from that */
}