如何用CSS分别列出项目的下划线？

我想在列表中的行之间创建一些空白空间。目前这些线路是连续的。下面是我创建了一个的jsfiddle例如：http://jsfiddle.net/bonyhad/pnPDz/8/如何用CSS分别列出项目的下划线？

这里是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>

列表中的每个项目应强调分开，而不是一条连续的路线。

来源

2013-03-06 bonyhad

你是指文本还是全文元素文本是用这个来完成的？ http://jsfiddle.net/pnPDz/9/ – Dreamwalker 2013-03-06 08:20:40

做到这一点：（更新＃示例李CSS来此）

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

}

工作fiddle

看看box model和mdn

来源

2013-03-06 08:18:52

谢谢，现在它的作品！ – bonyhad 2013-03-06 08:22:03

+1链接到* box模型*。 – 2013-03-06 08:22:14

W3Schools通常包含过时和不正确的信息。请参考 [Mozilla开发者网络（或MDN）]（https://developer.mozilla.org/） - 随着时间的推移，它更有可能保持准确和更新。请参阅http://w3fools.com – 2013-03-06 08:23:00

一个5px的空间添加到每个权item：

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

来源

2013-03-06 08:20:55

如何用CSS分别列出项目的下划线？

回答

相关问题