<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观察显示效果
<ul><li><img src="img.jpg" />这里显示的是文字</li>
</ul>
<style>
ul li img{ border:1px solid #ccc padding:3px}
ul li img:hover{ border:1px solid #f60}
</style>
控制li里面的图片就是li img 这样写
img:hover是控制鼠标放上去图片的边框颜色
希望可以帮到你~~
