浮動元素中的填充

我有一個頂部欄，分爲三個部分。左側部分，中間部分和右側部分。每個部分都是浮動的，所以他們的位置是一致的。浮動元素中的填充

我想要做的是設置一個填充左側和右側的元素。

左左填充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

浮動元素中的填充

回答

相關問題