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