本文操作环境：windows7系统、html5&&css3版、dell g3电脑。
如何让ul实现横向排列不换行的效果
方案一：
设置足够宽的宽度，然后将li的float属性设置为left。意思就是使li元素向左浮动排列。代码如下：
ul{ width:2000px;//设置足够的宽度 overflow:hidden; white-space:nowrap;//处理块元素中的空白符和换行符的，这个属性保证图片不换行 } li{ list-style:none; float:left;//向左排列 margin-left:15px; width:130px; }
方案二：
ul{ display:block; overflow:hidden; white-space:nowrap;//处理块元素中的空白符和换行符的，这个属性保证图片不换行 } li{ list-style:none; display:inline-block;//使li对象显示为一行 margin-left:15px; width:130px; }
在上面我们可以看到两种解决方法都用到了white-space属性，如果没有这个属性就无法完成不换行的效果。通过css手册可以看出这个属性是：如何处理元素内的空白。当选择nowrap时就是文本不会换行，文本会在在同一行上继续，直到遇到0c6dc11e160d3b678d68754cc175188a标签为止。但是用于非文本的元素也可以。
还有就是display属性。在方案二中如果不设置为inline-block，也无法完成不换行的效果。
inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
inline-block的特点：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)。
至此就解决了ul横向排列不换行的问题了。看来熟悉各种属性的特点还是很有必要的。
【推荐学习：css视频教程】
以上就是css ul 不换行怎么实现的详细内容。