-1

これは私にとって奇妙で、何かが足りないだけかもしれません。

いくつかの 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 個のブレーク タグで修正する論理的な方法はありますか?

4

3 に答える 3

0

div を垂直に揃えるclear:both代わりに与えてみてください。</br>

于 2013-10-10T09:14:13.417 に答える
0

You are not showing your whole CSS code aren't you? But as far as i can tell you might be using the classes form_left and form_right to float the elements left and right. So maybe add a:

<div style="clear:both;"></div>

right before the second form header.

于 2013-10-10T09:14:43.943 に答える
0

There is problem with your relative positioning also you are using same class for form header and footer

i have added new class form_footer

.form_footer
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border:0;
background-color:#EBEBEB;
height:50px;
width:580px;
margin-top:100px;
}

Demo Fiddle

于 2013-10-10T09:16:09.193 に答える