多個div放在一起，邊框重疊去重

多個div放在一起，邊框如何去重

先看一下效果

 在看一下改進後的效果

 是不是舒服多了。

上代碼

 <ul class="firstul">
        <li>cell</li>
        <li>cell</li>
        <li>cell</li>
        <li>cell</li>
        <li>cell</li>
    </ul>

CSS

ul.firstul{ display:table;border-collapse:collapse; margin-top:25px;margin-left:25px;}
ul.firstul>li{display:table-cell;padding:15px;border:1px solid #ccc;}

關鍵性代碼：border-collapse:collapse;

上面的例子是把ul和li轉換爲表格的形式，如果想根據窗口的大小，來控制一行顯示的格式，上面的方法就無法解決了，如下的例子

 

 

ul.secondul{width:150px;overflow:hidden;padding-bottom:1px;margin-left:25px;}
ul.secondul>li{width:50px;height:50px;line-height:50px;float:left;text-align:center;border:1px solid #ccc;margin-right:-1px; margin-bottom:-1px;}

主要用到li的margin-right:-1px  margin-bottom:-1px;以及外面的ul  padding-bottom:1px(不用的話下面的線會不顯示，因爲margin-bottom:-1px  超出了div的範圍)