代码之家 › 专栏 › 技术社区 › hekevintran

防止CSS布局中的换行

frontend css

23

hekevintran · 技术社区 · 16 年前

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

他在Windows上使用Firefox,一切看起来都很好。我在OS X上使用Firefox,其中 li 标记的文本太多,因此会流到另一行。设计的目的是让文本在一行上。

需要考虑以下几点:

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

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

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

2 回复 | 直到 16 年前

1

50

Richard Garside 11 年前

背景 white-space: nowrap 上 ul s将防止文本被包装,直到 <br /> 找到了。据我所知,这些列表已经是水平的,但为了完整起见,你可以通过制作 li 元素 display: inline 或 display: inline-block 这个 空白:nowrap 不会为你工作 float 编辑列表项目。

参考资料:

2

1

tomsseisums 16 年前

这是有可能的,这种设置 width: auto; 对于这些元素,我们也可以修复它。