浮動元素的聯繫表單到不同側面

Question

我有一個聯繫表單，我希望所有元素都浮動到左側並垂直對齊，除了「消息」框和提交按鈕應該浮動和對齊在右邊。

目前，所有領域似乎都是水平流動的。我該如何補救？

jsfiddle

<div id="contact"> 
     <div id="contact-form" class="clearfix"> 
     <h2><img src="img/chat.png" alt="contact frsh studio"></h2> 
     <ul id="errors" class=""> 
      <li id="info">There were some problems with your form submission:</li> 
     </ul> 
     <p id="success">Thanks for your message! We will get back to you ASAP!</p> 
     <form method="post" action="process.php"> 
      <input type="text" id="name" name="name" value="" placeholder="NAME" required="required" autofocus="autofocus" /> 
      <input type="email" id="email" name="email" value="" placeholder="EMAIL" required="required" /> 
      <select id="enquiry" name="enquiry"> 
       <option value="refrsh">Brand REFRSH</option> 
       <option value="consult">Brand Consultation</option> 
       <option value="support">Just a Hello!</option> 
      </select> 
      <textarea id="message" name="message" placeholder="MESSAGE" required="required" data-minlength="20"></textarea> 
      <span id="loading"></span> 
      <input type="submit" value="Holla!" id="submit-button" /> 
      <p id="req-field-desc"><span class="required">*</span> kind of necessary</p> 
     </form> 
    </div> 
    </div><!-- end contact --> 


#contact-form { 
    width: 690px; 
    padding:20px; 
    margin: 50px auto;  
    position:relative; 
} 
#contact-form h2 { 
    margin-bottom:20px; 
    margin-top:40px; 
    text-align: center; 
} 
#contact-form input, 
#contact-form select, 
#contact-form textarea, 
#contact-form label { 
    font-size:15px; 
    margin-bottom:2px; 
} 
#contact-form input, 
#contact-form select, 
#contact-form textarea { 
    float: left !important; 
    width:320px; 
    margin-bottom:20px; 
    padding:4px; 
}  
#contact-form textarea { 
    height:150px; 
    resize: none; 
} 
#contact-form #message { 
    clear: both; 
    float: right !important; 
} 
#contact-form label { 
    display:block; 
} 
#contact-form .required { 
    font-weight:bold; 
    color:#F00; 
} 
#contact-form #submit-button { 
    width: 100px; 
    border: 2px solid #515151; 
    display:block; 
    float:rightright; 
    margin-bottom:0px; 
    margin-right:6px; 
} 
#contact-form #loading { 
    width:32px; 
    height:32px; 
    background-image:url(../img/loading.gif); 
    display:block; 
    position:absolute; 
    rightright:130px; 
    bottombottom:16px; 
    display:none; 
} 
#errors { 
    border:solid 1px #E58E8E; 
    padding:10px; 
    margin:25px 0px; 
    display:block; 
    width:437px; 
    -webkit-border-radius:8px; 
    -moz-border-radius:8px; 
    border-radius:8px; 
    background:#FFE6E6 url(../img/cancel_48.png) no-repeat 405px center; 
    display:none; 
} 
#errors li { 
    padding:2px; 
    list-style:none; 
} 
#errors li:before { 
    content: ' - '; 
} 
#errors #info { 
    font-weight:bold; 
} 
#errors #info:before { 
    content: ''; 
} 
#success { 
    border:solid 1px #83D186; 
    padding:25px 10px; 
    margin:25px 0px; 
    display:block; 
    width:437px; 
    -webkit-border-radius:8px; 
    -moz-border-radius:8px; 
    border-radius:8px; 
    background:#D3EDD3 url(../img/accepted_48.png) no-repeat 405px center; 
    font-weight:bold; 
    display:none; 
} 
#errors.visible, #success.visible { 
    display:block; 
} 
#req-field-desc { 
    font-style:italic; 
} 
/* Remove box shadow firefox, chrome and opera put around required fields. It looks rubbish. */ 
input:required, textarea:required { 
    -moz-box-shadow:none; 
    -webkit-box-shadow:none; 
    -o-box-shadow:none; 
    box-shadow:none; 
} 
/* Normalize placeholder styles */ 
/* chrome, safari */ 
::-webkit-input-placeholder { 
    color:#CCC; 
    font-style:italic; 
} 
/* mozilla */ 
input:-moz-placeholder, textarea:-moz-placeholder { 
    color:#CCC; 
    font-style:italic; 
} 
/* ie (faux placeholder) */ 
input.placeholder-text, textarea.placeholder-text { 
    color:#CCC; 
    font-style:italic; 
} 

Answer 1

更新的jsfiddle：http://jsfiddle.net/jF49S/1/

正如我在我的評論中提到，不要忘記用float打交道時，利用CSS clear定義。

例如，這裏所需要的只是一個clear: left;。

#contact-form input, 
#contact-form select, 
#contact-form textarea { 
    clear:left; 
    float: left; 
    width:320px; 
    margin-bottom:20px; 
    padding:4px; 
} 

我也重新安排了一些HTML。有時這是獲得所需佈局所需的。例如，我將<textarea>移至表格的開頭，以便正確顯示。請記住，通常有很多方法可以用HTML和CSS完成佈局;我的建議只是一種方式。

上有很多漂浮的文章和教程，但這裏有一個很好的入門：http://css-tricks.com/all-about-floats/