巧妙实现css li不换行(ul li 横向排列不换行)的方法

发布时间:2020-10-27编辑:脚本学堂
在网页中如何实现ul li横向排列不换行?这里分析了css li不换的实现原理,并分享了css ul li文字与日期排列不换行的实例代码,供大家学习参考。

一、css li不换行问题

li 不换行
 
不换行原理:
ul 和 li 默认都是 display:block; 的标签,
可以通过2种方式实现 li 的 不换行显示:
* 将 li 设为 display:inline; ,然后通过 marging 和 padding 设置 li 的间距,
* 将 li 设为 float:left; ,然后通过 ( margin & padding ) 设置 li 的间距,通过 width 设置 li 宽度,可以指定 overflow:hidden 以防止内容过多撑开 li ,
 
ul 的设置:
ul 最好设置 margin & padding = 0,且 list-style 设置为 none,以不显示前面的符号,

例子:
 

.ul_one {list-style: none;margin: 0px;padding: 0px;}

例子:
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style type="text/css"> 
/* li 不换行,宽度根据内容自适应,通过 float 实现 */ 
.ul_one {list-style: none;margin: 0px;padding: 0px;} 
.ul_one li {float: left;background-color: #ccd;margin: 0px 20px 10px 0px;} 
 
/* li 不换行,宽度固定 */ 
.ul_two {list-style: none;margin: 0px;padding: 0px;} 
.ul_two li {float: left;width: 100px;margin: 0px 20px 10px 0px;background-color: #ccd;overflow: hidden; line-height:1.6em;} 
 
/* li 不换行,宽度根据内容自适应,通过 display:inline 实现 */ 
.ul_three {list-style: none;margin: 0px;padding: 0px;} 
.ul_three li {display:inline;background-color: #ccd;margin: 0px 20px 10px 0px;} 
 
.clear {clear: both;} 
</style> 
</head> 
<body> 
<ul class="ul_one"> 
<li>1ssssssssssssssssssssssss</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
</ul> 
<div class="clear"></div> 
<hr /> 
<ul class="ul_two"> 
<li>1ssssssssssssssssssssssss</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
</ul> 
<div class="clear"></div> 
<hr /> 
<ul class="ul_three"> 
<li>1ssssssssssssssssssssssss</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
<li>1</li> 
</ul> 
</body> 
</html> 

二、ul li 横向排列不换行的做法

使用ul li 水平排列而不要换行的实现方法。
注意红色部分。

css样式代码:
 

复制代码 代码示例:
#canvaslist{
list-style:none;
overflow: auto;
margin:0;
padding:0;
border:1px solid red;
zoom:1;
white-space: nowrap;
width: 100%;

}
#canvaslist li{
line-height:20px;
margin:5px 4px;
border:1px solid silver;
text-align:center;
display: inline; #
}
 

关键部分只有红色部分。

另外,在li部分,开始加入了float : left ,之后就没有不换行的效果,去掉就可以了。