方案一:
设置足够宽的宽度,然后将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 > 标签为止。但是用于非文本的元素也可以。
方案三
利用div块状元素+inline-block的方法