0

3 つのセクションに分かれたトップバーがあります。左セクション、中央セクション、右セクション。すべてのセクションがフローティングされているため、それらの位置は一直線に並んでいます。

私がやりたいことは、左右の要素にパディングを設定することです。

左要素への 10 左パディング。

右要素への 10 右パディング。

#tbl {padding-left:10px;}しかし、たとえばdiv要素全体の構造が壊れるなど、パディングを適用するたびに。

私が達成したいこと:

ここに画像の説明を入力

コード：

HTML:

<div id="topbar">
<div id="tbl">abc</div>
<div id="tbc">abcd</div>
<div id="tbr">abc</div>
</div>

CSS:

#topbar {

    width:100%;
    height:36px;
    padding-top:12px;
    background-color:#e7e6e6;
    border-top:1px solid #d0cdcd;
    border-bottom:1px solid #d0cdcd;


}

#tbl {float:left; width: 35%; text-align:left;}
#tbc {display:inline-block; width: 30%; text-align:center;}
#tbr {float:right; width: 35%; text-align:right;}

JSFIDDLE: http://jsfiddle.net/bkwdX/

ありがとう

4

2 に答える 2

2

パディングは内側の幅ではなく外側の幅に加算されるため、それらの幅を減らしてみてください。要素の幅を 300px として定義し、それに 10px の右パディングを追加すると、幅は 310px の垂直方向のスペースになります (一部のブラウザーでは)。

于 2012-05-20T10:51:06.733 に答える
1 
width:100% = width of the floated elements + padding

そのため、浮動要素の幅を 100% 未満に設定して、パディング用のスペースを確保する必要があります。

于 2012-05-20T10:53:47.753 に答える