CSS又一种实现多列的方法

CSS样式:

body {
text-align:center;
font-family: "宋体";
font-size: 12px;
        
}

a {
        color: 336;
        text-decoration:none;
}
a:hover {
        color: F00;
}

li {
border-top:1px solid CCCCCC;
padding:10px;

}
ul{
border-left:1px solid CCCCCC;

width:300px;
float:left;
margin:0 0 0 0;


}

Layer_xing_sheng {
text-align:left;
margin:auto;
background: F2F3F7;
width:602px;
border:1px solid CCCCCC;
border-left:none;
  }


.xing_sheng_titile {
        font-family:Verdana, Arial, Helvetica, sans-serif;
        
        
        background-color: CCCCD4;
        font-weight: bold;
        color: 000;
        text-indent: 4px;
}

调用事例:

<div id="Layer_xing_sheng">
    <ul>
      <li class="xing_sheng_titile">新生交流</li>
      <li>& 183;<a href=" ">第一条消息第一条一条消息</a>… <a href=" ">Kennytian</a> </li>
      <li>第二条消息…</li>
      <li>第三条消息</li>
      <li>第四条消息</li>
      <li>第五条消息</li>
      <li>第六条消息</li>
    </ul><ul>
      <li class="xing_sheng_titile">留言板</li>
      <li>& 183;<a href=" ">第一条消息</a></li>
      <li>第二条消息</li>
      <li>第三条消息…</li>
      <li>第四条消息</li>
      <li>第五条消息</li>
      <li>第六条消息…</li>
    </ul>
</div>