防止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;
}