填充浮动元素

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％，以便为填充留出一些空间。