我有一个顶部栏，分为三个部分。左侧部分、中间部分和右侧部分。 每个部分都是 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/
谢谢
最佳答案
尝试减小它们的宽度，因为内边距加起来是外部宽度，而不是内部宽度。您将元素宽度定义为 300px 并向其添加 10px 右填充，宽度将占用 310px 垂直空间(在某些浏览器中)。
关于html - 填充 float 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10672730/