css中ul不换行的实现方法

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

创新互联是一家集网站建设,铁门关企业网站建设,铁门关品牌网站建设,网站定制,铁门关网站建设报价,网络营销,网络优化,铁门关网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

css ul不换行的实现方法：1、设置足够宽的宽度，然后将li的float属性设置为left；2、通过“white-space:nowrap;”处理块元素中的空白符和换行符。

本文操作环境：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时就是文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。但是用于非文本的元素也可以。

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

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

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

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

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