0

私は自分のウェブサイトの左バーに取り組んでいましたが、少し左にずれているようです。なぜこれが起こるのかわかりません。コードを添付しました。

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

4

1 に答える 1

1

これは、幅が100％であるが、境界線も追加されているためです。これは、実際の幅が100％+2pxであることを意味します。

それらに境界線を付ける必要がある場合は、幅を指定しないでください。デフォルトでは、コンテナを埋める必要があります（フロートしない限り）。

于 2013-01-11T15:24:05.240 に答える