让<li>自动换行的css

div+css 赵建杰

代码示例一

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
<!--
.cy1 {
float:left;
width:300px;
margin:0px;
}
.cy1 li{
FLOAT:left;
padding:0px 10px 0px 10px;
background: url(http:/..w.gif) #CCC no-repeat 0px 0px;
list-style:none;
}
.cy1 ul{
float:left;
list-style:none;
width:300px;
padding:0;
border:0;
margin: 0px;
}
-->
</style>
</head>
<body>
<div class=cy1>
 <ul>
  <li>测测试</li>
  <li>测试测试测</li>
  <li>测试</li>
  <li>测试测试测试</li>
  <li>测试测试</li>
  <li>测试试</li>
 </ul>
</div>
</body>
</html>

代码示例二

(让li可以自动换行,并左对齐)

简单的css控制实现li的换行显示,为什么要用li换行显示,而不是用span等标签呢,因为这样的显示效果更工整。

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#navi{width:500px;}
ul {
 list-style-type: none;margin:0; padding:0
}
ul li {
 float:left;width: 100px;
}
body {
 font-size: 12px;
}
a:link {
 text-decoration: none;
}
-->
</style>
</head>
<body>
<div id="navi">
<ul>
  <li><a href="#">菜单1 Itemone</a> </li>
  <li><a href="#">菜单2 Itemtw</a></li>
  <li><a href="#">菜单3 Itemthree</a> </li>
  <li><a href="#">菜单4 Itemfour</a> </li>
<li><a href="#">菜单05 Itemfiv</a> </li>
<li><a href="#">菜单06 Itemsixx</a></li>
<li><a href="#">菜单7 Item777</a> </li>
<li><a href="#">菜单8 Item8888</a> </li>
<li><a href="#">菜单9 Item99</a></li>
<li><a href="#">菜单10 Itemtttenn</a></li>
<li><a href="#">菜单11 Item111e</a> </li>
<li><a href="#">菜单12 Item1122</a> </li>
<li><a href="#">菜单13 Item13131</a> </li>
<li><a href="#">菜单14 Item1414</a> </li>
<li><a href="#">菜单15 Item1555</a> </li>
<li><a href="#">菜单16 Item16</a> </li>
<li><a href="#">菜单17 Item17777</a> </li>
<li><a href="#">菜单18 Item18</a> </li>
<li><a href="#">菜单19 Item1999</a> </li>
<li><a href="#">菜单20 Item122</a> </li>
<li><a href="#">菜单21</a></li>
</ul>
</div>
</body>
</html>

发表评论:

女鞋批发
谢谢分享!!!!
女鞋批发2011-4-9 10:24:06 回复