एचटीएमएल मार्कअप

Question

के बिना इनपुट के बाद ब्रेक लाइन मैं कई इनपुट और उनके संबंधित लेबल प्रदर्शित करने की कोशिश कर रहा हूं। वे दोनों इनलाइन तत्व हैं, और मैं सीएसएस के साथ बाहरी HTML मार्कअप के बिना इस को हल करने के, यानी चाहते तो

<label for="hello"></label> 
<input id="hello" type="text" /> 
<br> 
<label for="stackoverflow"></label> 
<input id="stackoverflow" /> 

ईद की तरह अंत में एक br टैग जोड़ने के साथ एक काम कर समाधान है। ऐसा करने का सबसे आसान तरीका क्या है?

मैंने इस तरह के अन्य प्रश्नों को देखा है, लेकिन स्तंभ के बजाए पंक्ति द्वारा संरेखित किया है।

Answer 1

आप अपने आदानों के आसपास लेबल लपेट और उन्हें ब्लॉक के रूप में प्रदर्शित कर सकते हैं:

<style> 
    label { display: block; } 
</style> 

<label> 
    Hello: <input name="hello"> 
</label> 
<label> 
    StackOverflow: <input name="stackoverflow"> 
</label> 

ध्यान दें कि जब आप ऐसा करते हैं तो आप for="name" विशेषता का उपयोग करने की जरूरत नहीं है।

अन्य तरीके से (यदि आप लेबल आपके इनपुट के चारों ओर लिपटा नहीं करना चाहती) बाईं ओर लेबल फ्लोट करने के लिए है: मैं आम तौर पर एक छोटे से अधिक मार्कअप पसंद करते हैं,

<style> 
    label { float: left; clear: left; } 
</style> 

हालांकि, कुछ जोड़ता है label और एक तार्किक तत्व में input, एक क्षेत्र कहा जाता है:

<div class="field"> 
    <label for="hello">Hello</label> 
    <input name="hello"> 
</div> 
<div class="field"> 
    <label for="stackoverflow">Stackoverflow</label> 
    <input name="stackoverflow"> 
</div> 

क्योंकि प्रत्येक क्षेत्र एक div है, यह एक ब्लॉक स्वतः रूप में प्रदर्शित करेगा lly, लेकिन आप इसे व्यक्तिगत क्षेत्रों के लिए भी नियंत्रित कर सकते हैं।

Answer 2

अपने input और label तत्वों के लिए display:inline-block सेट करने का प्रयास करें। तो आप सभी ब्लॉक तत्व विशिष्ट सीएसएस जैसे witdh या margin-bottom जोड़ सकते हैं।

तुम भी display:block करने के लिए अपने input और label सेट और केवल इनपुट करने के लिए margin-bottom जोड़ सकते हैं। या आप यह रिवर्स कर सकते हैं और अपने लेबल के लिए एक मार्जिन टॉप जोड़ने;)

आप पिछले तत्व पर मार्जिन निकालना चाहते हैं तो आप बस तर्क की खातिर input:last-child {margin-bottom:0;}

input, label {display:block;} 
input {margin-bottom:18px;} 
input:last-child {margin-bottom:0;} 

/* Or to be specific you can use the attribut-selector 
    which only works on inputs with type="text" 
*/ 
input[type="text"]:last-child {margin-bottom:0;}