如何修復它的樣式「內聯」時的div尺寸

當div的樣式爲「內聯」時，似乎其所有尺寸變量都失效。如何修復它的樣式「內聯」時的div尺寸

例如

<div id="test" style=" border: 1px solid;padding:3px;width:40px; height:100px;"> 
foobar 
</div>

給了我一個大箱子，但經過我添加內嵌樣式，框縮小到最小尺寸。

例如

<div id="test" style="display:inline; border: 1px solid;padding:3px;width:40px; height:100px;"> 
foobar 
</div>

我的問題是，有沒有我可以保持在div內聯（同一行前面的一些文字），並在同一時間能夠修復其大小的方式。（div或跨度）

謝謝。

2012-05-30 eastboundr

內嵌元素的寬度將被忽略。根據我的經驗，在這種情況下，使用float可以解決問題。

您也可以使用inline-block，但如果您必須支持舊版瀏覽器，則可能不希望使用此功能。

浮動div將浮動到最近的塊元素父項的左側（假設此父項也未浮動）。如果您需要更多控制div浮動的位置，請在浮動div上添加包裹（非浮動和塊）div

2012-05-30 20:27:48

謝謝，它運行良好。作爲一個側面問題，無論如何，你是否知道如何將「float：left」float浮動到某個div？而不是整個網頁的左側？謝謝 – eastboundr

浮動的div會浮動到最近的塊元素父元素的左側（假設此父元素也是*不*浮動的）。如果您需要更多控制div浮動的位置，請在浮動div上添加一個包裹（非浮動塊）div。 –

或添加一個#element：在{clear：left; } - 這是全世界使用.clearfix-classes（例如bootstrap）的方式。 –

使用display: inline-block;

PS：inline-block是不是在一些較舊的瀏覽器。

2012-05-30 20:27:00 Steve

使用display: inline-block或（更好）display: block; float: left

2012-05-30 20:27:42 zessx

回答