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