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>
css样式:
<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>
效果图: