サイトのログインページを変更したい。
ログイン ページに登録フォームを追加する必要があります。そのため、そのページには、ログイン用と登録用の 2 つのフォームがあります。
これらのフォームを水平に設定する方法がわかりません。誰でもこれを行う方法を説明できますか?
これにより、何をする必要があるかがわかります。
HTML:
<div class="container">
<div class="form form1">Form 1</div>
<div class="form form2">Form 2</div>
</div>
CSS:
.container {
width:100%;
overflow:auto;
}
.form {
width:50%;
height:100px;
float:left;
}
.form1 {
background:#ccc;
}
.form2 {
background:#999;
}
ライブデモ: jsFiddle
使用float:left
:
HTML:
<form>
<input type="text" />
<input type="text" />
<input type="submit" />
</form>
<form>
<input type="text" />
<input type="text" />
<input type="submit" />
</form>
CSS:
input { display: block; }
form { float: left; padding-left: 15px; }
ライブデモ:ティンカービン
これらのフォームを div に入れることは可能ですか?
HTML:
<div class="left">LEFT FORM</div>
<div class="right">RIGHT FORM</div>
<div class="clear"></div>
CSS:
.left {
float:left;
width:300px;
}
.right {
width:300px;
}
.clear {
clear:left;
}