css – 在列表中模拟边框合拢(没有表)

前端之家收集整理的这篇文章主要介绍了css – 在列表中模拟边框合拢(没有表)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我总是有同样的问题,当我有2个相邻的元素的边框,边框合并。使用表格我们有border-collapse属性解决这个问题。

我尝试从一侧省略边框,但只适用于中间的元素,第一个和最后一个元素将错过一个边界。

有人知道列表元素的解决方案吗?

解决方法

您可以向ul添加左侧和底部边框,并将其从li中删除

小提琴:http://jsfiddle.net/TELK7/

html:

<ul>
    <li>one</li>
    <li>two</li>
</ul>

css:

ul{
    border: 0 solid silver;
    border-width: 0 0 1px 1px;
}
li{
    border: 0 solid silver;
    border-width: 1px 1px 0 0;
    padding:.5em;
}

猜你在找的CSS相关文章