页面布局 两列多行展示

<style>
.one{ width:210px; float:left; height:100px;}
.one li{ width:48px; float:left; height:30px; border:1px solid #ccc; margin-left:-1px; margin-top:-1px;}
ul li{list-style-type:none;}
</style>
<div class="one">
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</div>

这是在网上找到的一段，自己稍微改动了一点点，去除了黑圆点,效果图如下：