投稿者 tel | 2011年10月10日

inputタグをぴったり縦に並べる

input要素はinline-blockなので、縦にぴったり並べようとするときはline-heightを親要素に指定してあげる必要がある。

<div><input type="text" value="aaa" /></div>
<div><input type="text" value="bbb" /></div>
<div><input type="text" value="ccc" /></div>

 

* {
	margin: 0;
	padding: 0;
}
input[type="text"] {
	border: 1px solid #AAA;
	font-size: 7pt;
}

この状態でinputのheightとfont-sizeを調整しただけでは上下に間があいてしまう。(フォントサイズが小さい場合)

上下に間があく

これをぴったりくっつけるには親要素のdivにline-heightを指定すればいい。

div {
	line-height: 9px;
}

こうすると上下の余白がなくなってぴったりくっつく。

ぴったり

line-heightを指定しなくてもinputのdisplayをblockにしてしまってもぴったりくっつく。


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。