css中ul不换行的实现方法

小编给大家分享一下css中ul不换行的实现方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

css ul不换行的实现方法:1、设置足够宽的宽度,然后将李的浮动属性设置为左;2,通过“白色空间:nowrap;}”处理块元素中的空白符和换行符。

本文操作环境:windows7多系统,HTML5&和CSS3版,戴尔G3电脑。

如何让ul实现横向排列不换行的效果

方案一:

设置足够宽的宽度,然后将李的浮动属性设置为离开了。意思就是使李元素向左浮动排列。代码如下:

,,,,ul { 　　,,,宽度:2000 px;//设置足够的宽度 　　,,,溢出:隐藏; 　　,,,白色空间:nowrap;}//处理块元素中的空白符和换行符的,这个属性保证图片不换行 　　,,,} 　　李,,,{ 　　,,,list-style:没有; 　　,,,浮动:左;//向左排列 　　,,,margin-left: 15 px; 　　,,,宽度:130 px; 　　,,,}

方案二:

,,ul { 　　,,,显示:块; 　　,,,溢出:隐藏; 　　,,,白色空间:nowrap;}//处理块元素中的空白符和换行符的,这个属性保证图片不换行 　　,,,} 　　李,,,{ 　　,,,list-style:没有; 　　,,,显示:inline-block;//使李对象显示为一行 　　,,,margin-left: 15 px; 　　,,,宽度:130 px; 　　,,,}

在上面我们可以看到两种解决方法都用到了空白属性,如果没有这个属性就无法完成不换行的效果。通过css手册可以看出这个属性是:如何处理元素内的空白。当选择nowrap时}就是文本不会换行,文本会在在同一行上继续,直到遇到& lt; br>标签为止。但是用于非文本的元素也可以。

还有就是显示属性。在方案二中如果不设置为inline-block,也无法完成不换行的效果。

inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

inline-block的特点:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性)。

至此就解决了ul横向排列不换行的问题了。看来熟悉各种属性的特点还是很有必要的。

以上是“css中ul不换行的实现方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

css中ul不换行的实现方法