如何避免多个< li>中出现双重边框 [英] How to avoid double border from the multiple <li>

问题描述

如何避免列表样式出现双边框线?请查看以下小提琴以获得清晰的图片.我希望每个框的宽度为1px，但是当它们在一起时它们是两倍.

How to avoid double border lines from the list style? Please see the following fiddle for clear picture. I want 1px width of each box but they are double when the come together.

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;
     }

谢谢

推荐答案

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

这篇关于如何避免多个< li>中出现双重边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！