css - 如何避免多个 中的双边框

Question

如何避免列表样式中的双边框线？请参阅以下 fiddle 以获得清晰的图片。我想要每个盒子的宽度为 1px，但当它们放在一起时它们是两倍。

http://jsfiddle.net/awaises/4SLPh/1/

HTML:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

CSS:

ul{
     margin:0; padding:0;
     list-style:none;
     }
ul li{
     width:30%; height:200px;
     border:1px solid black;
     float:left;
     }

谢谢

Answer 1

尝试添加 margin-right:-1px; margin-bottom:-1px;