Question

我有一个表单，其中每个部分都有一个带有浅色背景的小标题。但是在第三个标题上，标题div的背景直接浮动在第二个标题之下。文本位于正确的位置，但背景颜色不是。

我已将代码包含在以下jsfiddle中：

在这下面：

<form id='contactus' action='#' method='post' enctype="multipart/form-data" accept-charset='UTF-8'>
    <div id="section-header">
        <center>Apply to work with us:</center>
        </font>
    </div>
    <div style="width:100%;  text-align:center; ">
        <p>
            <label for="position">What position are you interested in?</label>
            <BR>
            <Select style='width:70%;' NAME="position">
                <Option VALUE="15">Select Position</option>
                <Option VALUE="8">Position 1</option>
                <Option VALUE="7">Position 2</option>
            </Select>
        </p>BR>
        <BR>
        <div id="section-header">Contact Information</div>
        <BR>
        <div>
            <div style="width:50%; float:left;  text-align:right; text-align:center;">
                <label for="fname">First Name:</label>
                <BR>
                <input type="text" name="fname" style="width:280px;" />
                <BR>
                <label for="lname">Last Name:</label>
                <BR>
                <input type="text" name="lname" style="width:280px;" />
                <BR>
                <label for="email">Email Address:</label>
                <BR>
                <input type="text" name="email" style="width:280px;" />
                <BR>
                <label for="phone">Phone Number:</label>
                <BR>
                <input type="text" name="phone" style="width:280px;" />
                <BR>
                <label for="cell">Cell Phone Number:</label>
                <BR>
                <input type="text" name="cell" style="width:280px;" />
                <BR>
                <label for="texts">Text Messages:</label>
                <BR>
                <Select NAME="texts">
                    <Option VALUE="Yes">It is ok to contact me by text message.</option>
                    <Option VALUE="No">It is not ok to contact me by text message.</option>
                </Select>
            </div>
            <div style="width:50%; float:left; text-align:right; text-align:center;">
                <label for="street1">Address Street 1:</label>
                <BR>
                <input type="text" name="street1" style="width:280px;" />
                <BR>
                <label for="street2">Address Street 2:</label>
                <BR>
                <input type="text" name="street2" style="width:280px;" />
                <BR>
                <label for="city">City:</label>
                <BR>
                <input type="text" name="city" style="width:280px;" />
                <BR>
                <label for="state">State/Province:</label>
                <BR>
                <input type="text" name="state" style="width:280px;" />
                <BR>
                <label for="zip">Zip/Postal Code:</label>
                <BR>
                <input type="text" name="zip" style="width:280px;" />
                <BR>&nbsp;
                <BR>
                <BR>
                <BR>
            </div>
        </div>
        <div id="section-header">Professional Background</div>
        <BR>
        <BR>
        <div style="float:left; width:50%; text-align:center">
            <BR>
            <BR>
            <label for="native">Native Language:
                <BR>
            </label>
            <input style="width:70%" type="text" name="native" />
            <BR>
            <label for="education">Education Level:</label>
            <BR>
            <Select style="width:70%" NAME="education">
                <Option VALUE="1">Some High School</option>
                <Option VALUE="2">High School Graduate</option>
                <Option VALUE="3">Some College</option>
                <Option VALUE="4">Assoc Degree</option>
                <Option VALUE="5">Bachelor Degree</option>
                <Option VALUE="6">Master Degree</option>
                <Option VALUE="7">Doctorate</option>
            </select>
        </div>
        <div style="float:left; width:50%; text-align:center">
            <BR>
            <BR>
            <label for="lang1">Additional Languages:
                <BR>
            </label>
            <input style="width:70%" type="text" name="lang1" />
            <BR>
            <label for="lang2"></label>
            <input style="width:70%" type="text" name="lang2" />
            <BR>
            <label for="lang3"></label>
            <input style="width:70%" type="text" name="lang3" />
        </div>
        <BR>
        <BR>
        <BR>

我正在使用以下CSS：

  #section-header {
      width:100%;
      height:20px;
      background-color:rgb(244, 244, 244);
      color:rgb(58, 55, 108);
      text-align:center;
  }

知道造成这种情况的原因以及我如何解决这个问题？

Answer 1

首先，我强烈建议您将内联样式移动到CSS中，这样可以提高样式的可读性和可用性，使您（和其他人）能够更清楚地识别样式与任何问题的根本原因之间的相互作用。 / p>

其次，这可能是由于各种花车没有被正确清除 - 快速解决方法是将overflow:hidden;添加到#section-header

这会创建一个新的block formatting context，导致项目显示在预期的位置。

Demo Fiddle

Answer 2

在行中添加* <div style="clear:both;"></div>：74以便最简单的归档。

查看this demo。

clear：both - clear属性指定元素的哪些边不允许使用其他浮动元素。可能的值左，右，两者

我在更新jsfiddle

后做了一些小修改

Answer 3

您可以将display: inline-block;添加到#section-header，或者只使用其他float: left;

Answer 4

尝试使用如下： Demo

每个页面只能有一个具有该ID的元素，而类选择器最常用于多个元素。多次使用ID并非最佳做法，因此将您的ID更改为类

.section-header {
      clear:both; /* added */
      width:100%;
      height:20px;
      background-color:rgb(244, 244, 244);
      color:rgb(58, 55, 108);
      text-align:center;
      display:block; /* added */
  }

Answer 5

您的标记中有一些错误。实际上，你的标记非常混乱，在发布问题之前你应该注意到至少一些错误。

使用html验证器或体面编辑器指出基本错误。

首先，您在标记中不能拥有相同的 id

<div id="section-header">
    <center>Apply to work with us:</center>
    </font>
</div>

<div id="section-header">Contact Information</div>

<div id="section-header">Professional Background</div>

您必须将id="section-header"替换为class="section-header"，并分别调整CSS样式。

您没有关闭<form>代码
您无处不在...... {/ li>

不是问题的根源，但你应该更好地替换：

</font>与<Option>
<option>与<Select>
<select>与<BR>
属性通常以小写
请注意，<br>代码已弃用，请改用css <center>

作为惯例，我建议你用小写来编写标记和属性名称。

为什么我的div背景浮动在文本的不同位置？

5 个答案:

Demo Fiddle