CSS で不要なリストのインデントを削除する方法

CSS を使用してリストのインデントを削除する: 総合ガイド

順序なしリスト内の不要なインデント、特に行が折り返されている場合、イライラすることがあります。この問題を解決するための詳細な解決策は次のとおりです。

この例では、float: left on

の使用によりインデントが発生します。要素。これにより、スペースを水平方向に埋めるブロックレベルの要素が作成されます。さらに、親コンテナ #info でのマージンの使用もインデントに影響する可能性があります。

インデントを排除するには、次の CSS を実装します。

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

このコードは、パディングを削除します。

に存在する可能性があります。

以前にマージンとパディングをゼロに設定しようとしたかもしれませんが、これだけでは十分ではない可能性があります。

で両方のプロパティをゼロに設定することで、
• の float プロパティと width プロパティを調整します。

  ul {
      padding: 0;
      list-style-type: none;
  }
  
  li {
      float: none;
      width: auto;
  }

  これらのスタイルの変更と併せて、必要なレイアウトを実現するために、親コンテナ #info の余白や位置を調整する必要がある場合があります。

  提案された変更を加えた HTML/CSS の改訂版は次のとおりです:

  <div>
  <pre class="brush:php;toolbar:false">#info {
    color: #FFFFFF;
    margin: 0 auto;
    border-radius: 10px;
    border-style: solid;
    border-width: 2px;
    border-color: #FFF;
    padding: 20px;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#cccccc));
    overflow: hidden;
  }
  
  ul {
      padding: 0;
      list-style-type: none;
  }
  
  li {
      float: none;
      width: auto;
  }

  これらの変更を適用すると、不要なインデントが消え、リスト項目が左端に揃えられます。