跨度显示块也会在跨度下降后生成文本

Question

HTML：

<p>
<a href="#">my 
<span>favorites</span>
</a>
(13)
</p>

我希望“收藏夹”在“我的”之后放弃，然后转到单独设置“（13）”，它应该在同一行上作为“收藏夹” ”

我尝试使用上面的标记和下面的CSS，但是（13）也放弃了：

p span a { display: block; }

（13）应与“收藏夹”保持同一行，以便它看起来像

my
favorites(13)

Answer 1

这个怎么样？

<a href="#">my<br>favorites<span>(13)</span></a>

版本较长（更灵活）

如果您不想换行，可以使用块元素。现在，由于内联元素（<a>）内不允许使用块元素，因此应使用span标记并将其设置为块元素。

<a href="#">
    my
    <span class="second-line">
        favorites <span class="count">(13)</span>
    </span>
</a>

CSS：

a .second-line {
    display: block;
}
a .count {
    color: #888888;
}

Answer 2

这对你有用吗？

<p>
<a href="#">my 
<p>favorites <span>(13)</span></p>
</a>

</p>