当样式为“内联”时如何修复div大小

Question

当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或span）

感谢。

Answer 1

忽略内联元素的宽度。根据我的经验，使用float这样的情况将解决问题。

您也可以使用inline-block，但如果您必须支持较旧的浏览器，则可能不希望使用此功能。

浮动div将浮动到最近的块元素parent的左侧（假设此父级也未浮动）。如果您需要更多地控制div浮动的位置，请在浮动div周围添加一个包装（非浮动和块）div

Answer 2

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

Answer 3

使用display: inline-block;

PS：inline-block在某些旧版浏览器中不可用。