Question

我想在列表中的行之间创建一些空白区域。线条是连续的。这是我创建的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>

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

Answer 1

执行此操作:(将#example li css更新为此）

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

}

工作fiddle

查看box model和mdn

Answer 2

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

#example li {
    margin-right:5px;
}

如何使用CSS单独为列表项加下划线？

2 个答案: