网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
大家在页面布局时有没有遇到这种情况,让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;
}