些細な日常

inputタグのtype-textとtype-buttonを横並びにして表示しようとしたら高さが揃わなくて参った。ブラウザかデバイスが変われば大丈夫そうに見えたり、一般的に纏めるのは難しいのかも知れない。調べると入力フォントで高さが変わるという珍しいことが起きている。そこまでしっかり合わせるにはどうすれば良いか。CSSの二つの方法を見付けて望み通りのデザインを付けられるようになったので、紹介する。 目次 inputタグのtype-textは入力フォントで高さがコロコロ変わる inputタグのtype-textとtype-buttonの英語と日本語の高さの比較 フォームとボタンの高さを揃えるCSSの二つのマークアップ vertical-align:middleをフォームとボタンの両方にかけると良い display:flexをフォームとボタンの親ボックスにかけると良い inputタグのtype

[sakura_gioiko]

結城永人山のブログです。ホームで分からないけどたくさんの記事があります。話題も幅広いです。

[pinelike]

人生、健康、芸術／創作活動など、日頃の興味や関心を取り上げたエッセイ風の日記ブログです。