html - 2列形式和一个跨越两者的div？

Question

我使用 HTML 制作了一个表单，其中有两列用于输入字段，然后是一个“页脚”行，其中包含表单提交按钮和其他文本。

目前的基本形式是这样的，

 _______________________________
|                               |
| Input 1          Input 2      |
|                               |
| Input 3          Input 3      |    
|                               |
| Submit           Text         |
|_______________________________|

但是，我不希望“提交”按钮和文本将其 float 到右侧，但它会破坏我的布局:/

<div id="form-wrapper">
  <form id="contact_form" method="post" action="url/to/your/server/here">
    <!-- FIRST float left -->
    <div class="float-left c1">
      <ul>
        <li>       
          <label for="name" id="name" >Name<span class="required"> *</span></label>
          <input type="text" name="name" placeholder="John Doe" autocomplete="off" required>
        </li>
        <li>
          <label for="telephone" id="telephone" >Contact Number<span class="required"> *</span></label>
          <input type="tel" name="telephone" placeholder="(01225) 123456" autocomplete="off" required>
        </li>
        <li>
          <label for="email" id="email">Email:</label>
          <input type="email" name="email address" placeholder="example@example.com">
        </li>
      </u>
    </div>


    <!-- SECOND float left -->
    <div class="float-left c2">
      <ul>
        <li>
          <label for="enquiry">Enquiry:</label>  
          <select id="enquiry" name="enquiry">  
          <option value="general">General</option>  
          <option value="sales">Sales</option>  
          <option value="support">Support</option>  
          </select>
        </li>
        <li>
          <label for="Message" id="Message" >Message<span class="required"> *</span></label>
          <textarea name="message" cols="40" rows="6" required placeholder="Enter your message"></textarea>
        </li>
      </ul>
    </div>       

    <!-- Clear - notice this is a sibling of the els with floats -->
    <div class="form_footer">
      <ul>
        <li><span id="required_field">* Required fields</span></li>
        <li><button class="submit" type="submit">Submit</button></li>
      </ul>
    </div>
  </form>
</div>


a { 
    outline: none; 
}

html, body {
    background:url(images/bg.png);
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.915em;
    line-height: 14px;
    }

#form-wrapper {
    width: 550px;
    display: block;
    background: #f6f4f4;
    border: #d2cece solid 1px;
    }

#required_field {
    float: right;
    padding: 0 40px 10px 0;
    color: #D45252;
    font-size: 11px;
    font-weight: bold;
    font-family: Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif;
    }

.required {
    color: #D45252;
    font-weight: bold;
    }

#contact_form ul li {
    list-style: none;
    position:relative;
    }

input, textarea, select {
    background:url(images/bg.png);
    font-family: Helvetica, Arial, sans-serif;
    display: block;
    margin: 10px 10px 15px 0px;
    resize: none;
    -moz-border-radius: 3px;
    border-radius: 3px;
    }

/* chrome, safari */  
::-webkit-input-placeholder {  
    color:#CCC;  
}  
/* mozilla */  
input:-moz-placeholder, textarea:-moz-placeholder {  
    color:#CCC;  
}  
/* ie (faux placeholder) */  
input.placeholder-text, textarea.placeholder-text  {  
    color:#CCC;    
} 


.submit {
    font-family: Helvetica, Arial, sans-serif;
    }

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.form_footer {
    clear: both;
}

Answer 1

如果您不清除父元素的 float 元素， float 元素可能会破坏您的布局。这正是您的代码中发生的事情。

在这种情况下，您将提交按钮 float 到主父 div，没有任何明确的修复 <div id="form-wrapper" .

只要在包装器上应用一个好的 clearfix 就可以了。我在我的 jsbin 上发布了这个解决方案.

我使用了 Nicolas Gallagher 的 micro clearfix hack .

作为引用，您可以阅读此 SO thread .