html - 样式为“内联”时如何修复 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）

谢谢。

score 14 · Accepted Answer

内联元素的宽度被忽略。根据我的经验，在这种情况下使用 afloat将解决问题。

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

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

score 2 · Accepted Answer

2

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

于 2012-05-30T20:27:42.190 回答

score 1 · Accepted Answer

1

利用display: inline-block;

PS：inline-block在一些较旧的浏览器中不可用。

于 2012-05-30T20:27:00.537 回答

3 回答 3