li 自适应宽度

2021-08-08 15:28:32

li 自适应宽度...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="gb2312" /> 
<title>test</title> 
<style type="text/css"> 
body { 
margin:0; 
padding:0; 
font-size:62.5%; 
font-family:Verdana,Arial,sans-serif; 
text-align:center; 
} 
#nav ul { 
margin:0; 
padding:0; 
list-style:none; 
font-size:1.2em; 
background:#036; 
} 
#nav ul li { 
display:inline; 
} 
#nav ul li a { 
display:-moz-inline-box; 
display:inline-block; 
padding:5px 10px; 
color:#fff; 
background:#333; 
text-decoration:none; 
margin-right:-4px; 
} 
#nav ul li a:hover { 
color:#f5f5f5; 
background:#369; 
} 
</style> 
</head> 
<body> 
<div id="nav"> 
<ul> 
<li><a href="#">index</a></li> 
<li><a href="#">Item two</a></li> 
<li><a href="#">Item three</a></li> 
<li><a href="#">Item four</a></li> 
<li><a href="#">Item five</a></li> 
<li><a href="#">Item six</a></li> 
<li><a href="#">Item seven</a></li> 
<li><a href="#">Item eight</a></li> 
<li><a href="#">Item ten</a></li> 
<li><a href="#">Item eleven</a></li> 
</ul> 
</div> 
</body> 
</html>

提示：您可以先修改部分代码再运行