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

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上看到它。

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

Answer 1

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

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

您更新的演示：http：//jsfiddle.net/tnevg/4/

Answer 2

只需将padding-bottom添加到您的ul

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

Answer 3

尝试此代码上一条红行后添加了1个PX：

演示

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