2列形式和一個div跨越兩個？

我製作了一個表單，使用帶有兩列的HTML作爲輸入字段，然後使用表單提交按鈕和其他文本的「頁腳」行。2列形式和一個div跨越兩個？

，因爲它代表看起來像這樣的基本形式，

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

不過，我wan't提交按鈕，然後將它漂浮到右邊的文本，但它打破了我的佈局：/

<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="[email protected]"> 
     </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; 
}

來源

2013-01-06 Keva161

您是否嘗試過使用CSS input [type =「text」]和input [type =「submit」]來定位您的文本框並提交按鈕？ – nerdarama

是的。我可以很好地設計它，但將它浮動到我希望它打破布局的位置。 – Keva161

「休息」是什麼意思？ – nerdarama

如果不清除父元素的浮動元素，浮動元素可能會破壞您的佈局。這就是你的代碼中發生的事情。

您正在浮動提交按鈕，沒有任何clearfix到主父div，在這種情況下<div id="form-wrapper"。

只需將一個良好的clearfix應用於包裝，你應該很好去。我在我的jsbin上發佈了這個解決方案。

我使用了Nicolas Gallagher的micro clearfix hack。

作爲參考，您可以閱讀這個SO thread。

來源

2013-01-07 04:24:04 Nobita

2列形式和一個div跨越兩個？

回答

相關問題