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 に答える