みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

inputのtextとsubmitの高さがズレる

<form>
<input type="text">
<input type="submit">
</form>

上のHTMLで両方のinputの高さを同じに設定しても、高さが揃わないのですが、
何が原因でしょうか?

投稿日時 - 2014-10-15 17:45:40

QNo.8791611

困ってます

質問者が選んだベストアンサー

input[type="text"] {height:30px;}
input[type="submit"] {height:30px;}

そりゃダメでしょう。行内ブロックとして扱われる物と行内要素として扱われる物。
どうしてもなら、
input[type="text"],input[type="submit"]{line-height:40px;}
同じ設定をするのなら統一部分は一つのグループに書くほうがメンテナンス楽になりますよ。
念のため
input[type="text"],input[type="submit"]{line-height:40px;display:inline-block;}
かな。

投稿日時 - 2014-10-16 20:20:46

お礼

できました。回答ありがとうございました。

投稿日時 - 2014-10-16 23:22:46

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

<form action="./">
_<p>
__<input type="text" size="10" name="text">
__<input type="submit" value="送信">
_</p>
</form>
ずれないはずだけど。
細かい内容が分からないと、答えられない。

投稿日時 - 2014-10-15 18:07:54

お礼

回答ありがとうございました。

投稿日時 - 2014-10-16 23:23:14

ちなみにどうやって設定してるの?

投稿日時 - 2014-10-15 17:52:23

補足

こんな感じに設定しました。
input[type="text"] {
height:30px;
}

input[type="submit"] {
height:30px;
}

投稿日時 - 2014-10-16 18:29:21

お礼

回答ありがとうございました。

投稿日時 - 2014-10-16 23:23:02