一个css小问题，会的帮个忙
原本网页的排列是这样的：
<ul>
<li><a href="1191198.html" title="第1章：牛碧">第1章：牛碧</a></li>
<li><a href="1191200.html" title="第2章：奇怪的戒指">第2章：奇怪的戒指</a></li>
<li><a href="1191203.html" title="第3章：梦幻空间">第3章：梦幻空间</a></li>
</ul>

我想这样写然后能达到同样的排列效果：
<ul><li><a href="1191198.html" title="第1章：牛碧">第1章：牛碧</a></li></ul>
<ul><li><a href="1191200.html" title="第2章：奇怪的戒指">第2章：奇怪的戒指</a></li></ul>
<ul><li><a href="1191203.html" title="第3章：梦幻空间">第3章：梦幻空间</a></li></ul>


http://www.ealine.net/template/shouda8/file/mulu.css

css中该如何更改？谢谢
------解决方案--------------------
把红色部分去掉

ul {
margin: 0 10px;
width: 960px;
height: 31px;
padding: 0;
list-style: none;
overflow: hidden;
clear: both;
}

ul li {
float: left;
width: 31%;
border-bottom: 1px solid #eee;
line-height: 30px;
height: 30px;
overflow: hidden;
padding-left: 20px;
margin-bottom: 3px;
color: #090;
}