css - 防止 CSS 布局中的换行

Question

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

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

有几个考虑因素：

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

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

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

Answer 1

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

参考：

• 空白 CSS 属性
• 跨浏览器显示：inline-block

Answer 2

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