如何在 div 元素样式为 "inline" 时固定其大小

Question

当一个div被定义为“inline”时，似乎所有其尺寸相关的属性都失效了。

比如说：

<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）

谢谢。

- eastboundr

Answer 1

行内元素的宽度会被忽略。根据我的经验，像这种情况可以使用 float 来解决问题。

你也可以使用inline-block，但如果你需要支持较旧的浏览器，可能不想使用此选项。

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

- Justin Helgerson

---

谢谢，它运行良好。顺便问一下，你知道如何使“float:left”只浮动到特定的div中吗？而不是整个网页的最左边？谢谢 - eastboundr

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

或者添加一个 #element:after { clear: left; } - 这是整个世界都在使用的 .clearfix 类（例如 bootstrap）的方式。 - Manuel Arwed Schmidt

Answer 2

使用 display: inline-block 或者（更好的选择）display: block; float: left

- zessx

Answer 3

使用 display: inline-block;

注：在一些旧的浏览器中不支持 inline-block 属性。

- Steve