HTML リストでCSSが効かない時のやりがちなミス【list】

2020年5月23日

こんにちわ、ハル@haru_elpisです。

HTMLでリストを作成時にCSSが効かない時の備忘録です。

下記のようなHTMLがあるとします、これをfloatで左に動かしたい時。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
  <div class="main-list">
    <ul>
      <li>りんご</li>
      <li>ばなな</li>
      <li>みかん</li>
    </ul>
  </div>
</body>
</html>

こちらが失敗しがちなCSSミス

.main-list{
  float:left;
}

下記が正解、CSSに「li」まで含まないとリストは動かないのです。

.main-list li{
  float:left;
}

私もうっかりやってしまう事が多いです。

一つ一つの確認が大切ですね。

おわりっ

[rakuten id=”soukaidrink:10000912″ kw=”【楽天市場】クリスタルガイザー水(500ml*48本入)【クリスタルガイザー(Crystal Geyser)】：爽快ドリンク専門店”]

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！