0

我想在列表中的行之间创建一些空白空间。目前线路是连续的。这是我创建的一个 jsfiddle 示例：http: //jsfiddle.net/bonyhad/pnPDz/8/

这是CSS：

#example {
    width:800px;
    height:220px;
    display:block;
    overflow:hidden;
    margin:0 0 4em 0;
}

#example ul {
    list-style:none; 
    margin:0;
}

#example li {
    border-bottom:1px solid #fff;
}

#example h1 { 
    color:#000; 
    font-size:20px; 
    margin-bottom:5px; 
}

#example a:link, #example a:visited {
    color: #444; 
    display:block; 
    border-bottom:1px solid #666; 
    text-decoration:none; 
    padding: .3em .25em;
}

.links {
    float:left;
    width:615px;
    margin:0;
    padding:0;
}

.links ul {
    margin:0;
    padding:0;
}
#example .links li {
    float:left; 
    margin 0 20px 0 0; 
    width:185px;
}

#example .links li:nth-last-child(2),
#example .links li:nth-last-child(3),
#example .links li:nth-last-child(2) a,
#example .links li:nth-last-child(3) a, 
#example li:last-child, 
#example li:last-child a {
    border: 0;
}

这是HTML：

<section id="example">
    <div class="links">
    <h1>links</h1>
        <ul>
            <li><a href="#">Example1</a></li>
            <li><a href="#">Example2</a></li>
            <li><a href="#">Example3</a></li>
            <li><a href="#">Example4</a></li>
            <li><a href="#">Example5</a></li>
            <li><a href="#">Example6</a></li>
            <li><a href="#">Example7</a></li>
            <li><a href="#">Example8</a></li>
            <li><a href="#">Example9</a></li>
            <li><a href="#">Example10</a></li>
            <li><a href="#">Example11</a></li>
            <li><a href="#">Example12</a></li>
            <li><a href="#">Example13</a></li>
            <li><a href="#">Example14</a></li>
            <li><a href="#">Example15</a></li>
            <li><a href="#">Example16</a></li>
            <li><a href="#">Example17</a></li>
            <li><a href="#">Example18</a></li>
        </ul>
    </div>
</section>

列表中的每一项都应单独下划线，而不是连续的线。

4

2 回答 2

5

这样做：（将您的#example li css 更新为此）

#example li 
{
    border-bottom:1px solid #fff;
    padding:5px;
    margin:2px;

}

工作小提琴

看看盒子模型 和mdn

于 2013-03-06T08:18:52.470 回答
2

在每个项目的右侧添加一个 5px 的空间：

#example li {
    margin-right:5px;
}
于 2013-03-06T08:20:55.767 回答