<html>
<head>
<meta charset="utf-8">
<title>百度知道郭凯旗</title>
<style>
li a{display:block width:100px height:20px border:1px solid red}
li span{display:inline-block width:80px height:20px border:1px solid blue}
li{display:inline-block width:80px height:20px border:1px solid black}
</style>
</head>
<body>
<div>
<ul>
<li><a href="http://lovepy.com">这里是文字</a></li>
<li><a href="http://lovepy.com">这里是文字</a></li>
<li><a href="http://lovepy.com">这里是文字</a></li>
</ul>
<!--第一种 end-->
<ul>
<li><span>这里是文字</span></li>
<li><span>这里是文字</span></li>
<li><span>这里是文字</span></li>
</ul>
<!--第二种 end-->
<ul>
<li>这里是文字</li>
<li>这里是文字</li>
<li>这里是文字</li>
</ul>
<!--第三种 end-->
</div>
</body>
</html>
这三种都能实现，但不要同时用。
只要消除<ul>元素的内边距的上边距即可，例如
ul{ padding:0 20px} /*设置ul元素上下内边距为0，左右内边距20px*/示例如下：
创建Html元素
<ul><li>itemlist 1</li>
<li>itemlist 2</li>
<li>itemlist 3</li>
</ul
设置css样式
ul{width:100pxpadding:0 20pxborder:4px solid #bebceb观察显示效果
解决方法一:把li a:link,li a:visited{color:blackfont-family:arial}里面的font-family:arial去掉即可由于font-family:arial的字体高使a高度超出li的高,所以在FF里底边没有了,而ie允许这个错误所以底边还在解决方法二:给a一个高 例:
li a{
text-decoration:none
display:block
background:yellow
padding:6px
line-height:18px
}
解决方法三:给li增加高,并且给a字体高 例:
li{
height:35px
float:left
margin-right:3px
border:1px solid red
}
li a{
text-decoration:none
display:block
background:yellow
padding:6px
line-height:23px
}
