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

eas*_*ndr 3 html css

当div被设计为"内联"时,它的所有维度变量似乎都会失效.

例如

<div id="test" style=" border: 1px solid;padding:3px;width:40px; height:100px;">
foobar
</div>
Run Code Online (Sandbox Code Playgroud)

给了我一个大盒子,但在我添加内联样式后,盒子缩小到最小尺寸.

例如

<div id="test" style="display:inline; border: 1px solid;padding:3px;width:40px; height:100px;">
foobar
</div>
Run Code Online (Sandbox Code Playgroud)

我的问题是,有没有一种方法可以保持div内联(与文本之前的一些相同的行),同时能够修复其大小.(div或span)

谢谢.

Jus*_*son 13

内联元素的宽度将被忽略.根据我的经验,在这样的情况下使用float将解决问题.

您也可以使用inline-block,但如果您必须支持旧版浏览器,则可能不希望使用它.

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