CSS を使用してラップされた順序なしリストの不要なインデントを削除する方法

CSS を使用して順序なしリストのインデントを削除する

順序なしリスト内のテキストが折り返されると、不要なインデントが表示されることがあります。この問題に対処するには、次の手順を試してください。

1.インデントの削除

デフォルトのパディングとリスト形式のインデントを削除します:

ul {
    padding: 0;
    list-style-type: none;  
}

2.行の高さを減らす

必要に応じて、フォント サイズと同じか、わずかに小さく設定して行の高さを減らします。

ul li {
    line-height: 1em;
}

3. Float を無効にする

リスト項目に適用されている float プロパティを削除し、代わりにインライン ブロックが表示されるようにします:

ul li {
    float: none;
    display: inline-block;
}

4.フォント サイズの調整

最後のステップとして、フォント サイズを希望の外観に調整します。

例

次のコードを考えてみましょう。

<div>
<pre class="brush:php;toolbar:false">#info {
    ...
}

#info ul {
    padding: 0;
    list-style-type: none;
}

#info ul li {
    float: none;
    display: inline-block;
    line-height: 1em;
}

この手法を組み合わせると、インデントが削除されます。行を順序なしリストでラップし、クリーンでプロフェッショナルな外観を確保します。