-1

This is just weird to me and maybe I'm just missing something.

I'm laying out a form with a couple divs inserted at random spots and the spacing on the div places the text in the correct location, but the background-color appears way above the text.

Example:

(Unbroken)

http://i.imgur.com/WztreL6.jpg

(With 11 break tags)

http://i.imgur.com/7bHKab1.jpg

Here is the relevant code:

<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;
}

Any idea why this is coming out like this? Better yet, any logical ways to correct this with 11 break tags?

4

3 回答 3

0

您的相对定位存在问题，您也为表单页眉和页脚使用相同的类

我添加了新类 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;
}

演示小提琴

于 2013-10-10T09:16:09.193 回答
0

尝试给予clear:both而不是</br>垂直对齐 div。

于 2013-10-10T09:14:13.417 回答
0

您没有显示您的整个 CSS 代码，不是吗？但据我所知，您可能正在使用这些类form_left并form_right左右浮动元素。所以也许添加一个：

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

就在第二个表单标题之前。

于 2013-10-10T09:14:43.943 回答