将contact表单的元素浮动到不同的侧面

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完成布局；我的建议只是其中一种方法。

关于float的文章和教程很多，但这里有一个很好的入门教程：http://css-tricks.com/all-about-floats/