模拟列表中的边框合拢（无表） [英] Simulating border-collapse in lists (no tables)

问题描述

我总是有同样的问题，当我有2个相邻的元素的边框，边框合并。使用表格我们有border-collapse属性来解决这个问题。



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

I have always the same problem, when I have 2 adjacent elements with borders, the borders are merged. With tables we have the border-collapse property for solving this.

I've tried omiting the border from one of the sides, but that works only for elements in the middle, the first and final element will miss a border.

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

Does somebody know a solution for list elements for example?

推荐答案

您可以向ul添加左下边框，并从li中删除。

You can add a left and bottom border to the ul and drop it from the li.

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

这篇关于模拟列表中的边框合拢（无表）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！