html - 防止 LI 文本在内联列表的 LI 内换行；打破换行列表

Question

我使用列表在一行中显示多个标签，类似于标签在本网站上的显示方式。

如果标签列表比容器宽，我希望将整个标签(列表项)移动到下一行。但是，现在会发生什么，如果单个标签有空格，它会在空格处换行。

如何将整个 LI 强制到下一行？

代码如下:

<ul class="tags row cf">
    <li><a href="/slug1">first tag</a></li>
    <li><a href="/slug2">another tag</a></li>
</ul>

还有 CSS:

.tags {
    list-style-type: none;
    padding: 0;
    font-size: smaller;
}

.row {width: 100%}
.row::before,
.row::after {display: table; content: " "; clear: both}

.cf:after {
    clear: both;
}
.cf:before, .cf:after {
    content: " ";
    display: table;
}

Answer 1

添加

.tags li {
  display: inline-block;
}