div边框重叠，像素变粗，解决方法

最新推荐文章于 2023-06-26 09:38:49 发布

weixin_33859844

最新推荐文章于 2023-06-26 09:38:49 发布

阅读量2.2k

点赞数 1

文章标签：前端 python ViewUI

原文链接：https://my.oschina.net/u/2612473/blog/757449

版权

2019独角兽企业重金招聘Python工程师标准>>>

如左图所示，靠在一起的div，由于边框紧挨着，显得粗，很不美观，如何变成后面正确显示，解决方法

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

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

上面的例子是把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的范围)

转载于:https://my.oschina.net/u/2612473/blog/757449