在HTML中，有没有可能防止子元素换行？

Question

.container
{
 position: absolute;
 bottom: 0px;
 height: 25px;
 left: 200px;
 padding-right: 5px;
 background-color: black;
 overflow: hidden;
}


.child
{
 position: relative;
 float: left;
 height: 100%;
 width: 95px;
 background-color: #99CCFF;
 margin-left: 5px;
}

当浏览器窗口大小比所有子元素的宽度加起来还小，无法容纳不换行时，我希望出现滚动条而不是子元素默认换行的机制。

我无法控制子元素的数量，因此无法在容器上设置宽度。如何防止子元素换行？

- Justin808

Answer 1

如果您不想要换行，那么就不应该使用浮动 - 它们专门用于换行。

使用带有overflow:auto和white-space:nowrap属性的父容器，以及带有display:inline或inline-block属性的子元素。

- Tgr

---

inline-block 是我需要使用的。谢谢。 - Justin808

@Justin808：缺点是，如果你想让它在旧版浏览器（FF2、IE6-7）上运行，你需要一堆解决方法。 (http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/) - Tgr

Answer 2

这并不是用简单的HTML和CSS就可以实现的。如果不知道子元素的数量，唯一的方法就是使用JavaScript动态设置一个最小宽度，基于子元素的数量和它们的总宽度。

- Liggi

Answer 3

您可以添加一个包含所有子元素的父级容器。然后使用该div的overflow:auto属性。如果这不起作用，还可以使用self.innerHeight和self.innerWidth（通过javascript）来设置div的高度和宽度。

- WGF