5G云站长网
站长资源基地

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

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

大家在页面布局时有没有遇到这种情况,让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横向排列不换行的问题了。看来熟悉各种属性的特点还是很有必要的。

历史上的今天
九月
10
    哇哦~~~,历史上的今天没发表过文章哦
赞(0) 打赏
未经允许不得转载:5G云源码分享网 » 如何让ul实现横向排列不换行的效果

评论 抢沙发

评论前必须登录!

 

5G云源码 更专业 更方便

关于5G云联系我们

觉得能帮助你就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏