html - 在 li 列表之间制作一个断路器 li

Question

我正在尝试制作一个动态列表，我想在其中的某个位置制作一个断路器列表，但我不知道如何设置特定 li 的样式？

这是我想要完成的事情：

<ul id="games">
    <li class="myturn">Test 1</li>
    <li class="myturn">Test 2</li>
    <li class="breaker" style="height:3px;"></li>
    <li class="theirturn">Test 3</li>
    <li class="theirturn">Test 4</li>
    <li class="theirturn">Test 5/li>
    <li class="theirturn">Test 6</li>
</ul>

这可以做到吗？我无法让它工作。任何帮助表示赞赏并提前感谢:-)

Answer 1

CSS：

.breaker{
    list-style-type: none;
    border:1px #000 solid
}

小提琴：http: //jsfiddle.net/bB52W/1/

Answer 2

不要用标记来做。您正在使用标记进行样式设置，这是一个诺诺。只需将一个类添加到最后一个 myturn 元素并添加 margin-bottom: 10px;

<ul id="games">
    <li class="myturn">Test 1</li>
    <li class="myturn breaker">Test 2</li>
    <li class="theirturn">Test 3</li>
    <li class="theirturn">Test 4</li>
    <li class="theirturn">Test 5</li>
    <li class="theirturn">Test 6</li>
</ul>

.breaker{
  margin-bottom: 10px;
}

演示

Answer 3

<style>

#games li {
   /* your style for all LI's */
}

#games .myturn, #games .theirturn {
}

#games .breaker { 
    height: 3px;
}

</style>

你也可以只<li>用<hr> 它来填充你的水平线，仍然可用html5且有用。平时是这样的。。

---

默认情况下它有display:block;。