पृष्ठ स्टाइल: तैरता

Question

का उपयोग कर जब भी मैं अगले एक-दूसरे से मैं उन पर तैरता का उपयोग करते हैं तत्वों को रखना चाहते हैं विकल्प। फ्लोट के साथ दो divs का उपयोग करने की तरह: उन पर छोड़ दिया। मुझे लगता है कि अगर सबसे अच्छी रणनीति है या वहाँ एक बेहतर विकल्प है सोच रहा हूँ।

यह एक उदाहरण कोड

<div> 
    <div style="float:left"> 
    <p>Alphabet</p> 
    <select style="width: 200px;"> 
    <option>A</option> 
    <option>B</option> 
    </select> 
    </div> 
     <div style="float:left; margin-left:20px;"> 
     <p>Number</p><input type="text" value="123" /> 
     </div> 
</div> 

और क्या मैं ऊपर कोड में सुधार कर सकता है। क्या <p> वास्तव में आवश्यक है या मुझे कुछ अन्य टैग का उपयोग करना चाहिए।

उदाहरण style="display:inline-block"

के लिए और अपने दूसरे प्रश्न के बारे में

A Live Example

Answer 1

उपयोग:

<div style="display:inline-block"> 
    <label for="alphabet" style="display:block;">Alphabet</label> 
    <select id="alphabet" style=" width: 200px;"> 
    <option>A</option> 
    <option>B</option> 
    </select> 
</div> 

label का उपयोग कर अधिक अर्थ है, और यह करने के लिए display:block लागू करने, बनाता है यह पूरी चौड़ाई अवधि।

भी इनलाइन सीएसएस का उपयोग नहीं करने का प्रयास करें।

Answer 2

एक विकल्प display:inline-block; का उपयोग और this उदाहरण जैसे लेबलों का उपयोग किया जा सकता है।

लेबल सीमित डिस्प्ले क्षमताओं वाले उपकरणों के लिए बहुत अच्छे हैं, विशेष रूप से हैंडहेल्ड, क्योंकि उन पर क्लिक करने से निर्दिष्ट फ़ील्ड सक्रिय हो जाएगा। आपको हमेशा उनका इस्तेमाल करना चाहिए।

वैसे भी, मुझे फ्लोट का उपयोग न करने में बिंदु दिखाई नहीं देता है। यदि आप जानते हैं कि उन्हें सही तरीके से कैसे उपयोग किया जाए, तो वे बहुत अच्छे हैं और सभी ब्राउज़रों में संगत हैं।

Answer 3

float: left; का उपयोग करें। इस स्थिति में इसका उपयोग न करने का कोई कारण नहीं है।

यह बहुत अच्छी तरह से समर्थित है और "इनलाइन-ब्लॉक" आपको परेशानी देगा जब तक कि आप इसे पुराने ब्राउज़र के लिए हैक नहीं करते .. जब आप float: left; का उपयोग कर सकते थे।