在浮动元素中填充答案

【问题标题】：Padding in floated elements在浮动元素中填充
【发布时间】：2012-05-20 20:19:53
【问题描述】：

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

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

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/

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：

哦，当然，谢谢。但是百分比有点困难：/不知道要留多少空间来填充。但由于屏幕尺寸不同，我有必要使用它们。
好吧，之前没看到 jsfiddle 链接。谢谢;)

【解决方案2】：

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

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

【讨论】：