1

「メッセージ」ボックスと送信ボタンを除いて、すべての要素を左にフロートさせて垂直に配置したい連絡先フォームがあります。例外は、右にフロートして配置する必要があります。

現在、すべてのフィールドが水平に流れているようです。どうすれば治りますか？

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;  
}

現在のビュー

4

1 に答える 1

3

更新された JSFiddle: http://jsfiddle.net/jF49S/1/

clearコメントで述べたように、を扱うときは CSS 定義を利用することを忘れないでくださいfloat。

たとえば、ここで必要だったのは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 を使用してレイアウトを実現するには多くの方法があることを覚えておいてください。私の提案は 1 つの方法に過ぎませんでした。

float に関する多くの記事とチュートリアルがありますが、ここに良い入門書があります: http://css-tricks.com/all-about-floats/

于 2013-02-27T21:01:36.373 に答える