Q&A
> flex-boxやgridを使用せずに、あくまで、floatを使用しての回答をお願い致します。
なぜでしょうか？
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <div class="wrapper"> <header> <div class="Progate">Progate</div> <div class="right"> <ul class="rightt"> <li>会社概要</li> <li>採用</li> <li>お問い合わせ</li> </ul> </div> </header> <main> <div class="main"> <p>お問い合わせ</p> <p>名前</p> <input type="name"> <p>年齢</p> <select name="年齢"> <option value="選択">選択してください</option> <?php for($i=10;$i<=80;$i++) { echo "<option value='{$i}'>{$i}</option>"; } ?> </select> <p>お問い合わせの種類</p> <select name="選択"> <option value="選択">選択してください</option> <?php $hens = array('旅','海','湖','浜辺'); foreach($hens as $hen){ echo "<option value='{$hen}'>{$hen}</option>"; } ?> </select> <p>内容</p> <textarea name="内容"></textarea> </div> </main> </div> </body> </html>
* { padding:0; margin:0; } header { border-bottom:1px solid gray; } .progate { float:left; font-size:30px; color:#ED7000; margin:10px 20px; } .right { float:right; } li { font-size:10px; list-style:none; float:left; border-left:1px solid gray; padding:20px 30px; }
.progateをfloat:left;
.rightをfloat:right;
を行ったのですが、同じ行で、左と右にうまいこと分かれず、段落がかわっています。
これは、どうすれば、修正できますでしょうか。
flex-boxやgridを使用せずに、あくまで、floatを使用しての回答をお願い致します。
回答1件
0
ベストアンサー
flex-boxやgridを使用せずに、あくまで、floatを使用しての回答をお願い致します。
謎の縛りですが、課題かなんかですか。
html
1 <div class="Progate">Progate</div>
css
1.progate { 2 float:left; 3 font-size:30px; 4 color:#ED7000; 5 margin:10px 20px; 6}
Progate と progate は別物ですので、CSSが効いてない状態ですね。
どちらかに統一すればいいでしょう。
ただ、それだけでは後の要素が上がってきてしまうので、フロートのクリアが必要になります。
flex-box使えば、そのようなことを考える必要はないんですけどね。
投稿2021/02/20 17:17
総合スコア33790
あなたの回答
tips
プレビュー
