नई लाइन पर एक इनलाइन तत्व कैसे दिखाना है, या ब्लॉक तत्व पूरी लाइन पर कब्जा नहीं कर सकता है?

Question

मैं यह नहीं समझ सकता कि सीएसएस के साथ ऐसा कैसे किया जाए। अगर मैं सिर्फ <br> टैग का उपयोग करता हूं, तो यह बेकार ढंग से काम करता है, लेकिन मैं स्पष्ट कारणों से ऐसा करने से बचने की कोशिश कर रहा हूं।

असल में, मैं सिर्फ .feature_descspan एक नई लाइन पर शुरू करना चाहते हैं, लेकिन:

• अगर मैं यह एक इनलाइन तत्व बनाने के लिए, यह एक लाइन ब्रेक नहीं होगा।
• यदि मैं इसे एक ब्लॉक तत्व बना देता हूं, तो यह पूरी लाइन में फिट होगा, इन आइकनों में से प्रत्येक को अपनी लाइन पर रखेगा, और स्क्रीन पर बहुत सी जगह बर्बाद कर देगा (प्रत्येक .feature_wrapper थोड़ा अलग आकार होगा, लेकिन कोई भी कभी पूरे स्क्रीन के रूप में के रूप में व्यापक हो जाएगा)

उदाहरण कोड:। यह काम करता है, लेकिन एक br टैग का उपयोग करता:

<li class='feature_wrapper' id='feature_icon_getstart'> 
    <span style='display: none;' class='search_keywords'>started</span> 
    <span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span><br/> 
    <span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span> 
</li> 

मैं सीएसएस के साथ इस शैली एक ही परिणाम हासिल करना चाहते हैं:

<li class='feature_wrapper' id='feature_icon_getstart'> 
    <span style='display: none;' class='search_keywords'>started</span> 
    <span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span> 
    <span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span> 
</li> 

कोई विचार? या क्या मैं इस बारे में गलत तरीके से जा रहा हूं?

Answer 1

आप इसे एक संपत्ति प्रदर्शन ब्लॉक दे सकते हैं; तो यह एक div की तरह व्यवहार करेगा और अपनी स्वयं की पंक्ति है

सीएसएस:

.feature_desc { 
    display: block; 
    .... 
} 

Answer 2

हालांकि सवाल काफी अस्पष्ट है और HTML स्निपेट काफी सीमित है, मुझे लगता है

.feature_desc { 
    display: block; 
} 
.feature_desc:before { 
    content: ""; 
    display: block; 
} 

हो सकता है आप चाहते हैं कि आप <br/> तत्व के बिना प्राप्त करना चाहते हैं। हालांकि यह इन तत्वों पर लागू आपके सीएसएस को देखने में मदद करेगा।

नोट। उपरोक्त उदाहरण हालांकि आई 7 में काम नहीं करता है।

Answer 3

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

.feature_wrapper span { 
    float: left; 
    clear: left; 
    display:inline 
} 

संपादित करें: अब ब्राउज़रों बेहतर समर्थन आप कर इनलाइन-ब्लॉक का उपयोग कर सकते है।

.feature_wrapper span { 
    display:inline-block; 
    *display:inline; *zoom:1; 
} 

टेक्स्ट-संरेखण के आधार पर यह एक ब्लॉक तत्व की तरह अभिनय करते समय इसकी इनलाइन के माध्यम से दिखाई देगा।

Answer 4

के लिए ब्लॉक तत्व पूरी लाइन पर कब्जा नहीं, सेट यह कुछ छोटे करने के लिए चौड़ाई है और white-space:nowrap

label 
{ 
    width:10px; 
    display:block; 
    white-space:nowrap; 
}