html中关于li横向显示的css写法

其实很简单，只需要三个要素就可以。先上html结构

<div>
	<ul>
		<a href=''><li>首页</li></a>
		<a href=''><li>产品</li></a>
		<a href=''><li>新闻</li></a>
		<a href=''><li>留言</li></a>
	</ul>
</div>

再来css样式，因为很小就做了一个行内样式：

<pre name="code" class="html"><style type="text/css">
	ul{float:left;width:100%;padding:0;margin:0;list-style-type:none;}
	a{float:left;width:7em;text-decoration:none;color:white;background-color:blue;padding:0.2em 0.6em;border-right:1px solid white;}
	a:hover {background-color:red;font-color:yellow}
	li {display:inline}
</style> 

看似写的样式挺多，其实要实现横向显示 的话就需要三个要素就可以了。其中是： ul标签与a标签的   float:left;   再次是li标签的 display:inline