使用框尺寸屬性給出兩個內聯塊元素50％的寬度

我有一個具有20px填充的父級div。在這個div裏面有兩個span標籤。我想他們的寬度是父div的50％，並適合在同一行。 box-sizing: border-box似乎沒有解決這個問題。使用框尺寸屬性給出兩個內聯塊元素50％的寬度

HTML

<div> 
    <span>foo</span> 
    <span>bar</span> 
</div>

CSS

div {border: 1px solid black; box-sizing: border-box; padding: 20px; width: 150px;} 

div span {box-sizing: border-box; border: 1px solid green; display: inline-block; width: 50%;}

UPDATE：

它看起來像box-sizing沒有必要爲這個用例和CBroe的回答解決了根據問題LY。

來源

2015-02-11 Carl Edwards

span {'display：block; float：left'} – Adam 2015-02-11 15:32:58

如果沒有浮標，沒有辦法做到這一點？ – 2015-02-11 15:33:20

如果你不想使用浮動，你可以嘗試將它們定位絕對，但浮動將是一個更好的解決方案。 – Sirence 2015-02-11 15:34:03

白色空間元素之間是你的問題。

內嵌塊元素的佈局非常像普通文本，所以根據一般的HTML規則，一個元素的閉合元素和下一個元素的開始標記之間的空白會被壓縮爲一個空格字符 - 這使得50％ +一個空格字符+ 50％最終有點超過100％，所以第二個元素分裂成一個新的「行」

有幾種方法可以嘗試和對抗 - 從消除元素的標籤，將字體大小設置爲0，以用於這些元素之外的所有內容...其中一些在這裏更詳細地討論：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

來源

2015-02-11 15:54:58 CBroe

有100種方法可以做到這一點（也許誇張，但我可以想到至少4）。

最簡單的方法是讓他們block元素（添加了清晰的邊界）：

* { box-sizing: border-box; } 
 
span { display: block; width: 50%; float: left; padding: 12px; text-transform: uppercase; border: 4px solid #000; background: #f00;} 
 
div { border: 2px solid #0f0; overflow:hidden;}

<div> 
 
    <span>first span</span> 
 
    <span>second span</span> 
 
</div>

來源

2015-02-11 15:35:00 Adam

如果你真的不能使用float，http://fiddle.jshell.net/z3xj0gwx/1/這也可以。但我會建議使用float：left; – Sirence 2015-02-11 15:38:37

使用框尺寸屬性給出兩個內聯塊元素50％的寬度

回答

相關問題