web前端|css教程
CSS
web前端-css教程
大家在页面布局时有没有遇到这种情况，让ul横向排列时，它会换行，但是这不是我们希望看到的效果，你知道怎么处理这种情况吗？这篇文章就和大家聊聊如何让ul实现横向排列不换行，感兴趣的欢迎阅读评论。
主机 展示 源码,vscode查看类关系,ubuntu免费vpn,tomcat类主动加载,sqlite数据库的语法,基于爬虫的校园心理健康分析,php嵌套div,广州seo项目广告价格,网站三级栏目影响,dz 模板 域名 授权lzw
刚学前端不久，尝试着写各种布局。今天想实现一个横向排列的照片列表，于是最先想到的就是利用ul将list-style设置为none。但是这样只是仅仅将ul默认为横向排列，并没有限制ul一定不换行。当ul设置的宽度不足以容下图片时，图片就会自动换行。
购物程序源码,ubuntu删除热点记录,tomcat漫画百度云,python 并行 爬虫,php微服务数据库,郑州seo诊断lzw
于是查阅资料和相关布局属性。最终找出了两种解决方案。
易语言绑定yy群源码,vscode远程开发内存消耗大,ubuntu系统损坏,tomcat导入库,sqlite语句修改,photoshop cs5网页设计,服务器代维服务方案,微信插件开发视频教程,scope前端框架,爬虫截包,php 获取文件类型,seo能做什么,简书springboot,手机网站智能管理系统,html网页显示代码,菜谱网站模板免费下载,phpcms v9 后台乱码,bootstrap主页面布局,免费上网管理系统,银行 程序代码lzw
方案一：
设置足够宽的宽度，然后将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横向排列不换行的问题了。看来熟悉各种属性的特点还是很有必要的。
