Q&A
「修正方法」とは何のことでしょうか。問題が書かれていないようです。どのような状況になっていて、何が問題なのかを具体的にお書きください。
お世話になります。
https://gyazo.com/3e040718cc9dad09625222a5729a3107
このようなものを作ろうと考えています。
今の段階ではここまでできています。
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>Insta9</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7</head> 8 <body> 9 <div class="header"> 10 <div class="left_nav"> 11 <h1>insta9</h1> 12 <form> 13 <input type="text" /> 14 <input type="submit" /> 15 </form> 16 </div> 17 <div class="right_nav"> 18 <ul> 19 <li>投稿</li> 20 <li>ログイン</li> 21 <li>サインアップ</li> 22 </ul> 23 </div> 24 </div> 25 </div> 26 <div class="content"> 27 <p>ログイン</p> 28 <p>パスワード</p> 29 <p>ログイン</p> 30 </div> 31</body> 32</html>
css
1* { 2 margin: 1px; 3 padding: 1px; 4} 5li { 6 display: inline-block; 7} 8.left_nav { 9 float: left; 10} 11.right_nav { 12 float: right; 13}
修正方法を教えていただければと思います。
宜しくお願いします。
回答2件
0
ベストアンサー
最初のうちは分かりづらいかなと思うところだけ。
floatされている要素は解除しない限りずっと効いているので、clearfixと呼ばれているものを使って解除します。
そうすると.contentがfloatから解放されたのが分かると思います。
css
1.header:after { 2 content:""; 3 display:block; 4 clear:both; 5}
参考に。
【CSS】今更clearfixについて解説してみる
あと前の質問から</div>が1個多いので消しておいてください。
投稿2016/11/29 04:35
総合スコア2722
0
HTML5でフロートは使わない。
フレックスを使いましょう。
上部は固定配置、左右にそれぞれ配置する要素の親要素にポジションでリラティブ、配置する要素にポジションでアブソルート、トップ、レフト、ライトなどそれぞれ指定。
フォーム部分は幅指定して左右の余白をオートに指定。
以上です。
投稿2016/11/29 11:53
総合スコア335
因みに将来的にクリアフィックスは使わない指針ですから、フレックスを覚えましょう。
・HTML5でフロートは使わない
・将来的にクリアフィックスは使わない指針
この２つは初耳なんですが詳細を知りたいので公式ページの場所を教えていただいてもいいですか？
オフィシャルの答えをお求めならオフィシャルに問い合わせてみれば如何でしょうか？
オフィシャルの機嫌一つでルールが決まりますから。
阿部政権のように。
NEW WORLD ORDER
戦争の道具として利用されているのでMITにお尋ね下さい。
あなたの回答
tips
プレビュー
