在带有<li>元素的<ul>底部添加双边框之间的间距

Question

我想在我的 <ul> 列表底部有两条1px（或2px）的分隔线。

目前我已经有以下内容：

HTML

<ul>
    <li>here's one </li>
    <li>here's another one</li>
    <li>here's the last one</li>
</ul>​

CSS

ul {
    border-bottom: 1px solid black;
}
ul li {
    border-top: 1px solid red;
}
ul li:last-child {
    border-bottom: 1px solid red;
}
​

在 jsfiddle 上查看。

如何在底部边框（红色和黑色）之间获得一些间距？

- ohaal

Answer 1

一个简单的解决方案是在UL底部添加填充：

ul {
    border-bottom: 1px solid black;
    padding-bottom: 10px; /* your desired spacing */
}

您的更新演示在此处：http://jsfiddle.net/tnevg/4/

- Andy

Answer 2

只需在您的 ul 中添加 padding-bottom 即可。

ul {
    border-bottom: 1px solid black;
    padding-bottom:1px;
}

- bukart

Answer 3

尝试在最后一条红线后添加1像素的代码：

DEMO

ul {
    border-bottom: 1px solid black;
    padding-bottom:1px; /*added this line*/
}
ul li {
    border-top: 1px solid red;
}
ul li:last-child {
    border-bottom: 1px solid red;

}

- Alessandro Minoccheri