Question

我有一个简单的清单：

<div>Why did the duck cross the road?</div>  <!-- div added for context -->

<ul>
    <li>To get to the other side</li>
    <li class="correct">To prove he's no chicken</li>
    <li>because it was the chicken's day off</li>
</ul>

我想要的是突出正确答案，所以我有课程：

.correct
{
    background: rgba(3, 113, 200, 0.2);
}

FIDDLE

问题是我只想突出显示列表项的文本，即我希望正确的项目是内联的。

但如果我将display:inline / display:inline-block添加到.correct类中，则list-style-type会受到损坏。

FIDDLE

现在，我知道我可以在标记中添加span元素以获得正确的项目，如下所示：

<ul>
    <li>To get to the other side</li>
    <li><span class="correct">To prove he's no chicken</span></li>
    <li>because it was the chicken's day off</li>
</ul>

FIDDLE

..但我想知道如果没有额外的跨度我是否可以做到这一点。

Answer 1

您无法在显示为list-item以外的任何内容的元素上使用列表样式。

通过浮动和清除列表项，您可以实现相同的目标。隐藏<ul>的溢出以清除浮动，然后我认为你已经得到了你需要的东西：

ul{
    overflow:hidden;
}
ul li{
    float:left;
    clear:left;
}
.correct {
    background: rgba(3, 113, 200, 0.2);
}

JSFiddle

Answer 2

<强> DEMO

<强> HTML

<ul>
    <li>To get to the other side</li>
    <li class="correct">To prove he's no chickenTo prove he's no chickenTo prove he's no chickenTo prove he's no chickenTo prove he's no chickenTo prove he's no chicken</li>
    <li>because it was the chicken's day off</li>
</ul>

<强> CSS

.correct {
    display:inline;
    background: rgba(3, 113, 200, 0.2);
}

.correct:before {
   content: "";
   display: list-item;
   float: left;
}

当list具有list-style-type时，使列表项内联

2 个答案: