html - 在浮动元素中填充

Question

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

我想做的是为左右元素设置一个填充。

10 左填充到左元素。

10 右填充到右元素。

但是每当我应用一些填充时，例如 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 垂直空间（在某些浏览器中）。

Answer 2

width:100% = width of the floated elements + padding

因此，您需要将浮动元素的宽度设置为低于 100%，以便为填充留出一些空间。