li标签的使用很广泛，在各种选项卡的制作，导航栏等都用到，那么li标签的横向排列也是经常用到。<ul>标签下的项目<li>默认是纵向排列的，我们需要定义额外的CSS属性让其横向排列，li标签的横向排列有两种实现方法，现总结如下：
1、使用float:left
在这里顺便解释几个css样式的使用。
1）list-style:none,这个属性可以直接去掉li前面的圆点，可以自己进行设置其他美观的样式或者列表显示的样式。
2）如果想要让li具有具体的高度和宽度，并且让菜单的显示更宽一点的话，需要同时将display设置为block,才能进行padding,text-align等属于块级元素的属性设置。
3）伪元素的巧妙使用，通过伪元素可以让鼠标经过链接的时候的样式更美观，比如可以添加hover事件，改变经过时的背景颜色，字体颜色，甚至可以设置渐变的样式，可以为其添加更多美观的显示样式。
html结构：
//编写横向菜单的HTML代码架构
<body>
<ul id="menu">
<li><a href="http://www.baidu.com">baidu.com</a></li>
<li><a href="http://www.Code52.Net">Code52.Net</a></li>
<li><a href="http://www.yahoo.com">yahoo.com</a></li>
<li><a href="http://www.google.com">google.com</a></li>
</ul>
</body> <style type="text/css">
#menu{
font-size: 18px;
font-weight: bold;
}
#menu li{
text-decoration: none; /*去掉前面的圆点*/
list-style: none;
float: left;
border: 1px solid #FFFFFF;
background-color: #30DDEB;
}
#menu li a{
color:#040404;
text-decoration: none;
margin:0px;
display: block;
/*内边距（即填充padding）的方式，让每个菜单变得宽一些*/
<span style="white-space:pre"> </span>padding: 8px 50px;
<span style="white-space:pre"> </span>height:30px;
line-height:30px;
text-align:center;
}
<span style="white-space:pre"> </span>/*定义链接的悬停效果，让导航栏更美观*/
#menu li a:hover{
background-color: #FCFCFC;
}
</style>2、使用display:inline
html结构：
//编写横向菜单的HTML代码架构
<body>
<ul id="menu">
<li><a href="http://www.baidu.com">baidu.com</a></li>
<li><a href="http://www.Code52.Net">Code52.Net</a></li>
<li><a href="http://www.yahoo.com">yahoo.com</a></li>
<li><a href="http://www.google.com">google.com</a></li>
</ul>
</body>css样式：
<style type="text/css">
#menu{
font-size: 18px;
font-weight: bold;
}
#menu li{
text-decoration: none;
list-style: none;//去掉li前面的圆点
display: inline;//让li横向排列
border: 1px solid #FFFFFF;
background-color: #30DDEB;
}
#menu li a{
color:#040404;
text-decoration: none;//去掉a的下划线样式
margin:0px;
height:40px;
line-height:40px;
text-align:center;
}
#menu li a:hover{
background-color: #FCFCFC;//鼠标经过事件
}
</style>
4267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
