防止 CSS 布局中的换行

Question

我的 CSS 设计师做了一个设计，其中有两个 ul 兄弟姐妹从左到右排列。布局是通过指定ul 标签的宽度来完成的。

他在 Windows 上使用 Firefox，一切看起来都很好。我在 OS X 上使用 Firefox，其中一个 li 标签的内容有太多文本，所以它会流到另一行。设计的目的是使文本在一行上。

有几个考虑因素：

• 我希望ul 标签从左到右，而不是从上到下
• 我希望解决方案对 i18n 友好（翻译字符串不应导致它们分成两行）

如果这是以像素为单位定义的，为什么即使在同一个浏览器中，它在 OS X 中的显示与在 Windows 中也不同？

是否有通用的 CSS 解决方案可以防止换行或防止页面在 OS X 和 Windows 之间的换行方面看起来不同？或者这是一个失败的原因？

Answer 1

在uls 上设置white-space: nowrap 将永远阻止文本换行，直到找到<br />。据我了解，列表已经是水平的，但为了完整起见，您可以通过将li 元素设置为display: inline 或display: inline-block 来实现。 white-space: nowrap 不适用于 floated 列表项。

参考资料：

• the white-space CSS property
• cross-browser display: inline-block

Answer 2

有可能，为这些元素设置 width: auto; 也可以修复它。