2013年8月22日木曜日

inputフォームの行間をline-heightで調整

縦にいくつか並んだinputフォームの行間を調整。


・line-heightを使う。値を変えて調整。
・改行は、<br><br>とする。


↓ 以下サンプル

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>入力フォーム</title>

<style>
.gyo{
padding: 2px 15px;
margin: 1px 30px;
line-height: 0.1;
}

</style>

</head>

<body>
<br>
<h1>入力フォーム</h1>
<br><br>

縦に並ぶテキストフォーム
<br><br>

<form>
<div class=gyo>
<input type=text size=30 name="text1"><br><br>
<input type=text size=30 name="text2"><br><br>
<input type=text size=30 name="text3"><br><br>
<input type=text size=30 name="text4"><br><br>
</div>
</form>

<br>
line-heightを使って行間を調整。
<br><br>

</body>
</html>

0 件のコメント:

コメントを投稿