5

我想在我的<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 上看到它。

如何在底部边框(红色和黑色)之间获得一些间距?

4

3 回答 3

2

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

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

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

于 2012-10-28T15:29:47.407 回答
1

只需添加padding-bottom到您的ul

ul {
    border-bottom: 1px solid black;
    padding-bottom:1px;
}
于 2012-10-28T15:29:49.980 回答
1

试试这个代码在最后一个红线后添加 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;

}
于 2012-10-28T15:29:57.123 回答