中国第一Ajax站长门户:www.okajax.com   虚拟主机 域名注册 云主机

让li可以自动换行,并左对齐 - okajax.com - Ajax中国

我要投稿 会员登陆 RSS订阅 本站推荐:
您的位置主页 > 网页设计 > Html+Css > 让li可以自动换行,并左对齐

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

2008-05-29    文章来源:互联网    浏览次数:
简单的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>

文章评论(查看全部)

看不清楚?单击换一张。
loading.. 评论加载中....
关于我们 - 广告服务 - 版权隐私 - 免责声明 - RSS地图 - 网站地图 - 使用帮助 - 返回顶部