プログラミング

【CSS】<input> はインライン要素です max-widthは効きません

スポンサーリンク

inline

プログラミングを勉強中のみなさん、こんにちは!

今回は、<input>タグの注意点について紹介します。
初心者向けのメモ書きとして執筆しておりますので、あしからず。

それでは見ていきましょう。

<input>の注意点

<input>タグに幅を持たせようとして、max-widthを設定しました。

しかし、 ブラウザの幅を広げてもうんともすんとも言いません。

あれこれ調べてもると、どうやら「<input>タグはインライン要素であり、max-widthは設定できない」ということらしいです。

 

ちなみに、インライン要素と言えば、他には、<a>タグや<br>などですね。

 

解決方法

ケースバイケースですが、

私の場合、

幅は持たせたい、なおかつ、レスポンシブにするにあたり変動させたかったので、

widthをpxで決めるのではなく、

「%」で設定しました。

まとめ

<input>は枠があるので、ブロック要素に見えますが、インライン要素です。

同じ現象でお困りの方、是非参考にしてください。

関連性は薄いですが、模写コーディングについて記事も紹介しておきます。

スポンサーリンク

-プログラミング
-, , , ,

© 2022 サカらいふ Powered by AFFINGER5