【したいこと】
HTMLとCSSで、実用的ではありませんが、投票ボタンを作る練習をしています
【問題】
「float: left」で2つのボタンを寄せたのですが、「#wrap clear both」を書いて、回り込みが
解除されると思うのですが、
①#wrapがCSS上で黄色くなりませんでした
なぜでしょうか????
②HTML上で、どこで「<div id="wrap">」に対応する
「</div>」を閉じれば
上手くいくのでしょうか?
③また、「h1{}」はCSSのどこに
書けばいいのでしょうか?
学び始めたばかりなので、
間違いが多くて申し訳ありません。。
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset ="UTF-8"> 5 <title>my first project</title> 6 <link href ="css/style.css" rel ="stylesheet"> 7 </head> 8 <body> 9 10 <div id= "wrap"> 11 <h1>修学旅行先の投票</h1> 12 <div class= "buttonA"> 13 <a href="#" class="btn_1">Japan</a> 14 <a href="#" class="btn_2">Korea</a> 15 </div> 16 </div> 17 18 <h1>投票結果</h1> 19 20 </body> 21 </html>
CSS
1@charset "utf-8"; 2 3.buttonA a.btn_1 { 4 display: block; 5 margin: 20px; 6 padding: 120px; 7 height: 60px; 8 width: 100px; 9 padding: 0.8em; 10 text-align: center; 11 text-decoration: none; 12 color: #EC407A; 13 border: 2px solid #EC407A; 14 border-radius: 8px; 15 transition: .4s; 16 float: left; 17} 18.buttonA a.btn_1:hover { 19 background: #EC407A; 20 color: #fff; 21} 22 23.buttonA a.btn_2 { 24 display: block; 25 margin: 20px; 26 height: 60px; 27 width: 100px; 28 padding: 0.8em; 29 text-align: center; 30 text-decoration: none; 31 color: blue; 32 border: 2px solid blue; 33 border-radius: 8px; 34 transition: .4s; 35 float: left; 36 } 37.buttonA a.btn_2:hover { 38 background: blue; 39 color: white; 40 border: 2px solid blue; 41 } 42 43#wrap{ 44 clear: both; 45 }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/24 13:25