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.フォント サイズの調整

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

例

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

#info {
    ...
}

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

#info ul li {
    float: none;
    display: inline-block;
    line-height: 1em;
}
この手法を組み合わせると、順序なしリストの折り返された行のインデントがなくなり、すっきりとしたプロフェッショナルな外観が保証されます。