css怎么让ul实现横向排列不换行的效果-创新互联

css怎么让ul实现横向排列不换行的效果？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

刚学前端不久，尝试着写各种布局。今天想实现一个横向排列的照片列表，于是最先想到的就是利用ul将list-style设置为none。但是这样只是仅仅将ul默认为横向排列，并没有限制ul一定不换行。当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时就是文本不会换行，文本会在在同一行上继续，直到遇到 < br > 标签为止。但是用于非文本的元素也可以。

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

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

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

感谢各位的阅读！看完上述内容，你们对css怎么让ul实现横向排列不换行的效果大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联成都网站设计公司行业资讯频道。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。