2016-05-12 5 views
0

私はリストを使用して、このサイトにタグが表示される方法と同様に、行内にいくつかのタグを表示しています。LIテキストがインラインリスト内のLI内で折り返されないようにします。代わりに折り返しリストを区切ります

タグのリストがコンテナよりも広い場合は、タグ全体(リストアイテム)を次の行に移動します。しかし、現在では、1つのタグに空白がある場合、それは空白で折り返されます。

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

答えて

1

.tags li { 
    display: inline-block; 
} 
を追加します
関連する問題