वेब फॉर्म तत्वों को एक नई लाइन पर कैसे रखा जाए?

Question

नई लाइनों पर "इनपुट" तत्व कैसे रखें? ऊपर के उदाहरण में सभी तत्वों को क्रमिक रूप से रखा जाता है, यानी lable-> इनपुट-> lable-> इनपुट, आदि

/* ----------- My Form ----------- */ 
.myform{ 
    margin:0 auto; 
    padding:14px; 
} 
#stylized{ 
    border-width:1px; 
    border-style:solid; 
    border-color:#b7ddf2; 
    background:#ebf4fb; 
} 
#stylized h1 { 
    font-size:14px; 
    font-weight:bold; 
    margin-bottom:8px; 
    border-width:1px; 
    border-style:solid; 
    border-color:#b7ddf2; 
    padding-bottom:10px; 
} 
#stylized label{ 
    display:block; 
    font-size:11px; 
    font-weight:bold; 
    text-align:right; 
    float:left; 
} 
#stylized input{ 
    float:left; 
    font-size:11px; 
    padding:4px 2px; 
    border:solid 1px #aacfe4; 
    width:70px; 
    margin:2px 0 20px 10px; 
} 
/* --------- End of Form --------- */ 

    <div id="stylized" class="myform"> 
     <form id="form" name="form" method="post" action="index.html"> 
     <h1>Data</h1> 
     <label>Name: </label> 
     <input type="text" name="name" id="name"/> 
     <label>Email: </label> 
     <input type="text" name="email" id="email"/> 
     <label>Password: </label> 
     <input type="text" name="password" id="password"/> 
     </form> 
    </div> 

Answer 1

#stylized input{ 
    display: block; 
    font-size:11px; 
    padding:4px 2px; 
    border:solid 1px #aacfe4; 
    width:70px; 
    margin:2px 0 20px 10px; 
} 

हो जाएगा ताकि के रूप में सरल रूप में कुछ भी करने की कोशिश की है एक नई लाइन पर हर इनपुट डाल दिया। - हटाया गया "फ्लोट: बाएं", जोड़ा गया "प्रदर्शन: ब्लॉक"।

Answer 2

आप

<label>Name: </label><br> 
     <input type="text" name="name" id="name"/> 
     <label>Email: </label><br> 
     <input type="text" name="email" id="email"/> 

Answer 3

कि के लिए

यहाँ JsFiddle है ...

संपादित करें:

#stylized label{ 
    font-size:11px; 
    font-weight:bold; 
    text-align:right; 
} 
#stylized input{ 
    display:block; 
    font-size:11px; 
    padding:4px 2px; 
    border:solid 1px #aacfe4; 
    width:70px; 
    margin:2px 0 20px 10px; 
}​ 

Answer 4

जब सभी तत्वों के लिए पर्याप्त जगह के साथ एक अस्थायी लेआउट का चयन आप नई लाइनों को रोकने के।

इस प्रयास करें:

नमूना http://jsfiddle.net/8yZff/

#stylized label{ 
    font-size:11px; 
    font-weight:bold; 
    text-align:right; 
} 
#stylized input{ 
    font-size:11px; 
    padding:4px 2px; 
    border:solid 1px #aacfe4; 
    width:70px; 
    margin:2px 0 20px 10px; 
    display: block; 
} 

Answer 5

मेरा अनुमान है user1359163 के anwswer में मदद मिलेगी, हालांकि आप को पता है क्यों परवाह हो सकता है: float का उपयोग कर प्रभावी ढंग से दस्तावेज़ की सामान्य से बाहर तत्व को हटा प्रवाह, z-index को बदलने की तरह थोड़ा, तत्व को div सीमाओं, लेबल, स्पैन और ... 'अनदेखा' clear शैलियों पर प्रवाह करने की इजाजत देता है।

तत्व व्यवहार करता है जैसे कि यह अन्य तत्वों पर तैरता है, इसलिए उस सम्मान में, यह उन सभी अन्य तत्वों के बाएं और दाएं से स्पष्ट रहता है जो तैरते नहीं हैं। मैं कोई सीएसएस विशेषज्ञ नहीं हूं, लेकिन इस पर ध्यान देने के इस तरीके ने मुझे float, clear और z-index शैलियों का उपयोग करते समय सामना किए गए उलझन वाले लेआउट के साथ समस्याओं को हल करने में बहुत मदद की है।

Answer 6

लेबलर डेटा के लिए, जैसे लेबल/फ़ील्ड जोड़े की सरणी, table का उपयोग करें। आपको स्टाइलिंग बहुत आसान लगेगी, और नॉनस्टाइल उपस्थिति बहुत बेहतर होगी।