Q&A
製作者以外知りえないことなので、製作者に質問されては。
前提・実現したいこと
stylesheet.cssにて、、
CSSで2回float: left;と書くのはなぜ？
1回で良くないですか？？？
この書き方の方が分かりやすい理由を知りたいです。
css
1.header-list { 2float: left; 3} 4 5.header-list li { 6float: left; 7padding: 33px 20px; 8}
HTML
1 <head> 2 <meta charset="utf-8"> 3 <title>fogefoge</title> 4 <link rel="stylesheet" href="stylesheet.css"> 5 </head> 6 <body> 7 <div class="header"> 8 <div class="header-logo">fogefoge</div> 9 <div class="header-list"> 10 <ul> 11 <li>fogefoge</li> 12 <li>fogefoge</li> 13 <li>fogefoge</li> 14 </ul> 15 </div> 16 </div>
試したこと
stylesheet.css内の.headerlist{float: left;}を消す。
制作物に差異なし。
そもそも、`list`要素は質問文の HTML 内に存在しません。質問者さんが読んでいる HTML と CSS は一致していますか？
回答ありがとうございます。
>kei344様
製作者に質問してみます。
>s8_chu様
すいませんでした、表記が間違っていました。。
回答2件
0
HTMLやCSS、JavaScriptで困ったときはMDNを読むのがおすすめです。
CSS の float プロパティは、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。
つまりfloat: left;があたっている要素の直下にあるブロックに対して左寄せでの回り込みが効きます。
そのため、今回のように以下の記述がないと、<ul>以下の<li>の後に続く要素に対しては左寄せでの回り込みが効きません。
css
1.header-list li { 2 float: left; 3}
投稿2019/03/08 10:18
編集2019/03/11 01:14
総合スコア181
0
ベストアンサー
回答ありがとうございます。
確かに<li>に適用されるためには、
.header li{
float:left
}
が必要ですね。
ただし、
.header {
float: left;
}
は開発者曰く、↑は不要なコードだったみたいです。
制作物が変わらないためです。
投稿2019/03/08 07:12
編集2019/03/12 08:06退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
