Enjoy IT Life

【CSS】リスト(liタグ)の左余白をなくす方法

HTML/CSS

liタグの左にはlist-style-typeのアイテムを配置するための場所が確保されています。

ですので、list-style-type: none適用したリストの場合、左に余白ができた状態になります。

<ol class="list">
  <li class="list__item">item</li>
  <li class="list__item">item</li>
  <li class="list__item">item</li>
  <li class="list__item">item</li>
</ol>

.list {
  background: lightgreen;
  list-style-type: none;
}

.list__item {
  background: lightblue;
}

See the Pen li-left-padding-before by Toshiharu Nishina (@nishina555) on CodePen.

liタグの左余白をなくすためにはliタグの親要素に`padding-left: 0`を適用します。 
<ol class="list">
  <li class="list__item">item</li>
  <li class="list__item">item</li>
  <li class="list__item">item</li>
  <li class="list__item">item</li>
</ol>

.list {
  background: lightgreen;
  list-style-type: none;
  padding-left: 0px;
}

.list__item {
  background: lightblue;
}

See the Pen li-left-padding-after by Toshiharu Nishina (@nishina555) on CodePen.

活用事例

padding-left: 0を利用した余白削除のテクニックは、『ページネーション』や『パンくずリスト』など、list-style-type: noneのliタグで横並びアイテムを実装する際に有効です。

<ol class="list">
  <li class="list__item">item</li>
  <li class="list__item">item</li>
  <li class="list__item">item</li>
  <li class="list__item">item</li>
</ol>

.list {
  background: lightgreen;
  list-style-type: none;
  padding-left: 0px;
  display: flex;
}

.list__item {
  background: lightblue;
}

.list__item:not(:last-child) {
  margin-right: 10px;
}

See the Pen li-lines-without-left-padding by Toshiharu Nishina (@nishina555) on CodePen.

参考資料

タグ: css