CSS块级元素在一行上的表现

Question

什么是处理一系列需要在同一行上的块级元素的最常见方法（例如，如果需要使用JavaScript修改它们的宽度）？将float:left应用于每个元素与使用定位来放置它们相比，有什么优缺点？

- Dan Monego

Answer 1

如果您不太关心旧版浏览器（我指的是IE6），那么这里最好的方法就是采用

display:inline-block;

基本上，它创建一个盒子模型元素，而不清除其前后内容，因此它仍然在该行中。每个现代浏览器都能很好地解释它。

- Gabe

---

试试火狐浏览器，它也有这个属性的问题。如果我没记错的话，有一个-moz-inline-block或类似的东西可以解决这个问题。 - Davy Landman

就在今天，我使用FF3做了一些东西，完全没有任何问题，在FF、Opera、Chrome和IE7中看起来都一样。 - Gabe

这个想法不太好，有简单的方法可以实现他所说的，而不使用那些在许多浏览器中不受支持的可疑元素（尽管我们对IE6的感觉如何，它仍然是一个主要的浏览器）。 - Andrew G. Johnson

IE6可以通过轻微的适应性调整正确支持它（http://www.quirksmode.org/css/display.html），但在网页设计中，解决问题的方式直接关系到网站的受众。这就是为什么我说如果老旧浏览器不是他所关心的话，他可以使用它。 - Gabe

Answer 2

浮动是我的选择，但这真的取决于你想要实现什么。如果您能提供更具体的示例，我将能够清楚地说明应该使用什么和为什么。但是，以下是我遇到的一些优缺点（我假设您是指绝对定位）：

定位优点： - 相对于标记为相对定位的下一个祖先元素非常精确的定位-允许极大的灵活性 - 允许元素在视觉上与它们在DOM中的顺序不同

定位缺点： - 与其他元素对齐更困难，因为定位元素不再处于文档流中，并且需要高度精度 - 其他元素忽略了绝对定位的元素，这意味着您可能会有潜在的重叠，除非您考虑到定位元素的最小和最大大小 - 如果您正在使用绝对定位来进行列，则更难实现页脚。

浮动优点： - 构建简单和高级布局非常容易 - 没有页脚问题 - 不必担心精度，浏览器会为您处理 - 父容器会自动伸展

浮动缺点： - 对于那些经验较少的浮动布局用户来说，有很多陷阱可能会导致在SO上提出许多问题：）

至于Sebastian提到的clear:both元素，有一种简单的解决方法。假设您有一个容器div和2个浮动的div内部。

HTML:

<div id="con">
    <div class="float"></div>
    <div class="float"></div>
</div>

CSS（层叠样式表）：

#con { background:#f0f; }
.float { float:left; width:100px; height:100px; background:#0ff; }

如果您运行此代码，您会注意到容器 div（品红色的）只有一个像素高，而浮动 div 是正确的 - 这就是 Sebastian 提到的问题。现在，您可以采纳他的建议并添加 br 或浮动容器，但这不太语义化 - 所以这里有一个稍微更优雅的解决方案。只需将 overflow:hidden; 添加到容器 div 中，如下所示：

#con { background:#f0f; overflow:hidden; }

现在您的容器应该正确地包装浮动的div。

- Darko

Answer 3

除非父容器也被分配了浮动标签或底部有一个带有clear:both;的br，否则它们不会随着它们一起拉伸。

我会选择float:left而不是定位。当一个对象拉伸时，浏览器会自动对齐所有内容。因此，您需要关心的内容更少。

- Sebastian Hoitz

Answer 4

我认为不应该显式定位元素，而是使用display:inline指令浏览器使用内联布局来处理元素的定位。

关于float和定位，我认为唯一使用定位对齐它们的方法是使用绝对定位，这意味着您需要处理重新调整（浏览器视口）以保持元素在原位。

我认为通过使用float属性，浏览器会为您处理重新调整大小的问题，并在正确的位置重新渲染元素。

- rhinof

---

display:inline 的问题在于它排除了很多脚本选项，包括动态调整宽度。 - Dan Monego

Answer 5

在这种情况下，使用浮点数的唯一缺点是你只能左对齐或右对齐它们，无法居中。但是，你提到你正在使用绝对值来设置宽度，因此你可以将所有浮动元素嵌套在一个DIV元素中，并向父DIV添加margin-right或margin-left来模拟居中对齐。

- Andrew G. Johnson