css中li设了左浮动,如何使它宽度超过ul以后依然不自动换行，成横排显示？

发布网友发布时间：2022-04-06 11:18

共6个回答

懂视网时间：2022-04-06 15:39

大家在页面布局时有没有遇到这种情况，让ul横向排列时，它会换行，但是这不是我们希望看到的效果，你知道怎么处理这种情况吗？这篇文章就和大家聊聊如何让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的特点：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)。

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

热心网友时间：2022-04-06 12:47

设置ul一个固定的宽度，如：width：1000px

设置ul横向超出后自动。overflow-x：auto

设置ul竖向超出隐藏

有足够多的li，li的width设置为100px ，li的数量最少为11个

因为li数量多，导致ul会出现横向滚动条，这样就实现了想要的效果

热心网友时间：2022-04-06 14:05

li设置好固定
宽度
，ul也要固定宽度，在这个宽度内计算好能容纳几个
li
的宽度，最好稍微大点，这样li总
长度
只要不超过ul长度就不会换行了

热心网友时间：2022-04-06 15:40

.box{width:500px;height:500px;overflow:hidden;}
li{width:100px;height:300px;float:left;background:green;margin:10px;}
ul{width:999999px;}

热心网友时间：2022-04-06 17:31

ul { white-space:nowrap; }
li { display:inline;}

热心网友时间：2022-04-06 19:39

设置UL高度和宽度并且设置overflow:hidden;