css
1/*余白を消してる*/ 2* { 3 padding:0; 4 margin:0; 5 font-family: meiryo; 6} 7 8/*ヘッダーの高さとline-heightを同じにして中央寄せ*/ 9.menu{ 10 height:65px; 11 text-align: center; 12} 13 14/*作業中*/ 15.menu ul{ 16} 17 18/*インラインブロックにして横並び,paddingで間隔揃え*/ 19.menu ul li{ 20 display: inline-block; 21 line-height: 65px; 22 padding: 0 20px; 23} 24 25/*文字設定はここ*/ 26.menu ul li a{ 27 color:black; 28 padding:12px 0; 29 text-decoration: none; 30 transition:all 1s; 31 font-weight: bold; 32} 33 34/*ホバーして透過*/ 35.menu ul li a:hover{ 36 opacity: 0.3; 37} 38 39#top-wrapper{ 40 width:auto; 41} 42 43/*カバーにして横幅MAX*/ 44.top-logo{ 45 46 47 background-size: cover; 48 display: block; 49 margin:0 auto; 50 51} 52 53#second-col{ 54 height: 100vh; 55 width: 500px; 56 background: url(soulb.jpg); 57 display: table-cell; 58 vertical-align: middle; 59 text-align: center; 60} 61 62/*heightにvhを使用して縦揃え*/ 63/*.soulb{ 64 height: 100vh; 65 opacity: 0.5; 66 width:100%; 67}*/ 68.about{ 69 width: 80px; 70 margin: auto; 71 padding: 10px; 72 border: 10px solid #fff; 73 color: #fff; 74 opacity: 0.6; 75 text-align: center; 76 transition:all 1s; 77 78 79} 80.about:hover{ 81 color:red; 82 background-color: orange; 83 opacity: 0.3; 84} 85 86 87 88 89 90 91 92
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>ボックステスト</title> 6 <link rel="stylesheet" type="text/css" href="testy.css"> 7 <meta name="viewport" content="width=device-width,initial-scale=1"> 8</head> 9<body> 10 11 <div id="second-col"> 12 <a class="about" href="">ABOUT</a> 13 </div> 14 15 16 17 18 19 20</body> 21</html>
画像の中にaboutというボタンを作りたいのですが、second-colクラスを横幅いっぱいにしようと width:100%;にしても変わりません。
なぜでしょうか?
初心者で困っています。
ご教授いただければ幸いです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。