html - 填充 float 元素

Question

我有一个顶部栏，分为三个部分。左侧部分、中间部分和右侧部分。每个部分都是 float 的，所以它们的位置是一致的。

我想做的是为左右元素设置一个内边距。

10 left padding to left element.

10 right padding to right element.

但是每当我应用一些填充时，例如 div 元素 #tbl {padding-left:10px;} 整个结构都会中断。

我想要实现的目标:

代码:

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/

谢谢

Answer 1

尝试减小它们的宽度，因为内边距加起来是外部宽度，而不是内部宽度。您将元素宽度定义为 300px 并向其添加 10px 右填充，宽度将占用 310px 垂直空间(在某些浏览器中)。