浮动元素中的填充

我有一个顶部栏，分为三个部分。左侧部分，中间部分和右侧部分。每个部分都是浮动的，所以他们的位置是一致的。浮动元素中的填充

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

左左填充10个元素。

10右对右元素进行填充。

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

我想达到的目标：

enter image description here

代码：

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/

感谢

来源

2012-05-20 John

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

来源

2012-05-20 10:51:06

编辑这样http://jsfiddle.net/sssonline2/bkwdX/2/ – shareef

当然，谢谢。但是对于百分数来说它有点难：/不知道要留出多少空间来填充。但由于屏幕尺寸不同，我需要使用它们。 – John

好吧没有看到之前的jsfiddle链接。谢谢 ;） – John

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

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

来源

2012-05-20 10:53:47

浮动元素中的填充

回答

相关问题