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

不要使用标记。您正在使用标记进行样式设置，这是一个nono。只需在最后一个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;
}

DEMO

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;。

在列表中列出一个断路器li

3 个答案: