ボタンが崩れる?html・CSSの修正箇所 | 世界の宗教とスピリチュアル

ボタンが崩れる?html・CSSの修正箇所

コーディング初心者だとボタンを作るのに、height・widthの指定でつくりがち。

しかしこの方法だとレスポンシブに対応してくれません。

 

height/widthの指定を外す

height指定が入っていると、下の図の様に後に続く文章が表示されなくなってしまいます。

padding指定で解決

.button03 a {
width: 250px; //削除
 height: 70px;  //削除
 display: block;
 color: #FFF;
 text-decoration: none;
 text-align: center;
 background-color: #f39800;
 border-bottom: solid 6px #ec6c00;
 border-radius: 30px;
 font-size: 25px;
 font-weight: bold;
 padding: .1em;   //追記
}

height/widthの指定を外し、paddingの設定を入れます。

そうすると、2行で表示される様になりました。

 

何行でも可

padding指定であれば、文字の如何に関わらず、文字数によって、ボタンが勝手に伸縮してくれる様になります、

 

こっちも読んで!
スポンサーリンク
テック
はげまるをフォローする
世界の宗教とスピリチュアル
スポンサーリンク