これは私にとって奇妙で、何かが足りないだけかもしれません。
いくつかの div をランダムな場所に挿入してフォームをレイアウトしています。div の間隔によってテキストが正しい位置に配置されますが、背景色がテキストの上に表示されます。
例:
(途切れない)
http://i.imgur.com/WztreL6.jpg
(改札11個付)
http://i.imgur.com/7bHKab1.jpg
関連するコードは次のとおりです。
<div class="page" id="booking_columns">
<div class="seven-hundred">
<form class="booking_form">
<div class="form_header">
<h5><span class="spacer">Tell us about you</span></h5>
</div>
<p class="form_tags form_left">First Name</p>
<p class="form_tags form_right">Last Name</p>
<input type="text" class="customSelect_first_name" name="first_name">
<input type="text" class="customSelect_last_name" name="last_name">
<br />
<p class="form_tags form_left">Email Address</p>
<br />
<input type="text" class="customSelect_email" name="email">
<br />
<p class="form_tags form_left">Phone Number</p>
<br />
<input type="text" class="customSelect_phone" name="phone">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="form_header">
<h5><span class="spacer">Tell us about your home</span></h5>
</div>
</form>
</div>
</div>
CSS
#booking_columns
{
position:relative;
top:20px;
}
.seven-hundred
{
width:600px;
height:100%;
float:left;
}
.booking_form
{
position:relative;
}
.page
{
width:900px;
margin-left:auto;
margin-right:auto;
}
.form_header
{
position:relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border:0;
background-color:#EBEBEB;
height:50px;
width:580px;
margin-bottom:20px;
}
なぜこれがこのように出てくるのか分かりますか?さらに良いことに、これを 11 個のブレーク タグで修正する論理的な方法はありますか?