本文介绍了一种使用CSS来控制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>
<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>
扫一扫
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
