我正在为我的网站设计左栏,但它们似乎有点左移。我不知道为什么会这样。我附上了代码。
HTML
<div id="main_element">
<div id="first-child">
<img/><span id="edit">Edit Picture</span>
</div>
<div id="leftbar" align="center">
<div>Left bar 1</div>
<div>Left bar 2</div>
<div>Left bar 3</div>
</div>
</div>
CSS
#main_element{
width:90%;
position:relative;
border:1px solid teal;
}
#first-child{
position:relative;
height:90%;
width:100%;
}
#edit{
position:absolute;
right:6%;
top:4%;
font-size:1em;
}
#main_element #first-child img{
border:1px solid teal;
height:50%;
width:90%;
margin:5%;
background-color:#ccc;
}
#leftbar{
height:40%;
margin:0 1%;
}
#leftbar div{
border:1px solid;
width:100%;
height:25%;
background:#E0E0E0;
text-align:center;
padding:1% 0;
}
我也附上了一个演示。 http://jsbin.com/agahuw/2/edit
最佳答案
因为你把它们的宽度设置为 100% 但你还给它们添加了边框,这意味着实际宽度是 100% + 2px
如果你需要在它们上面有边框,不要给它们一个宽度 - 默认情况下它们应该填满它们的容器(除非你 float 它们)
关于html - 左栏似乎有点左移,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14280903/