ul实现横向排列不换行的两种解决方案
来源:互联网 发布:剑桥大学公开数据库 编辑:程序博客网 时间:2024/06/05 17:03
刚学前端不久,尝试着写各种布局。今天想实现一个横向排列的照片列表,于是最先想到的就是利用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横向排列不换行的问题了。看来熟悉各种属性的特点还是很有必要的。
0 0
- ul实现横向排列不换行的两种解决方案
- ul li 横向3px间距 + ul 中 li 实现强制不换行
- </li></ul>横向排列
- ul li横向排列
- CSS的ul和li实现横向排列和去掉li的点
- ul横向排列,ul下拉框
- 实现横向排列的几种方案
- ul标签去掉点,横向排列的方法
- 如何让多个div横向排列而不换行
- 让ul内的li不换行,且加有滚动条,最好不用div实现
- ul列表项为横向排列
- 让ul中的li变成横向排列
- 横向排列views,自动换行
- CSS实现div或ul,li水平对齐不换行
- ie6下ul下的li不自动换行
- CSS实现简单的横向排列demo
- 排列,含重复元素和不重复元素两种情况的实现
- UILabel自动换行的两种实现
- Activity启动过程全解析
- JQuery使用插件实现轮播
- 让生活变成一个游戏 Habitica-超好玩的待办事项App
- 算法训练 学做菜
- 移动端meta设置大全
- ul实现横向排列不换行的两种解决方案
- java正则表达式
- PAT乙级1064
- android studio jni路径配置
- Android 原生ExoPlayer 解析
- 坑
- django解决跨域请求的问题
- 在controller中用@value读取配置文件的方法
- C# 特性