2010-12-23 16 views
14

के साथ एक पंक्ति में दो स्पैन कैसे लपेटें मैं सीएसएस के साथ एक पंक्ति में दो spans लपेटना चाहता हूं।सीएसएस

यहाँ मेरी कोड है:

<div style="width:60px;"> 
    <span id="span1" style="float:left; display:inline;"></span> 
    <span id="span2" style="float:left; display:inline; "></span> 
</div> 

लेकिन यह काम नहीं करता।

यह कैसे करें?

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

मैं div या span का उपयोग "आईडी" उपयोग करना चाहते हैं, या तो, मैं सिर्फ उन्हें एक पंक्ति में होना चाहता हूँ।

जब मैं शैली के बिना span का उपयोग करता हूं, तो सामग्री एक ही पंक्ति में नहीं होती है। दूसरी पंक्ति नीचे जायेगी।

+1

वे एक पंक्ति में हैं। आप वास्तव में क्या उम्मीद करते हैं? –

+4

स्पैन वैसे भी 'इनलाइन' तत्व हैं, आपको उनके साथ कुछ भी करने की ज़रूरत नहीं है। –

+0

क्या आप इस मुद्दे का अलग-अलग वर्णन कर सकते हैं? मैं इसे समझता हूं क्योंकि आप बिना किसी ब्रेक के एक ही लाइन पर स्पैन डालना चाहते हैं, जो उस कोड के साथ ठीक काम करता है। क्या आप यही करने की कोशिश कर रहे हैं? –

उत्तर

26
<div style="float:left;"> 
<span style="display:inline;"></span> 
<span style="display:inline; "></span> 
</div> 
+0

कृपया इस लिंक पर जाएं http://www.jsfiddle.net/LurGq/7/ –

+0

यह पूरी तरह से काम करता है। बहुत बहुत धन्यवाद!!! –

+0

मैंने आपका लिंक देखा है। अच्छा संसाधन धन्यवाद। –

0

यह फ्लोट बाएं है जो इसे अलग-अलग लाइनों पर ले जा रहा है। शायद स्पैन के बीच &nbsp; (गैर ब्रेकिंग स्पेस) आज़माएं।

0

ओवरफ़्लो शायद?

<div style="width:60px; overflow:hidden;">

+0

@OP को अवधि में 'फ्लोट: बाएं' सेट किया गया है। इसे एक पंक्ति में बनाने के लिए div को छुपा ओवरफ्लो डालने के लिए। – haha

0

float और display शैलियों परस्पर अनन्य हैं, तो उन्हें एक साथ का उपयोग कर कोई मतलब नहीं है। <span>display:inline; पर डिफ़ॉल्ट है, तो यह वैसे भी अनावश्यक है (जब तक कि आपके पास कहीं और शैली अन्य जगहों पर सेट न हो?)।

3

फ्लोट गड़बड़ कर देगा। आम तौर पर काम करने के लिए एक फ्लोट के साथ आपको इसके साथ चौड़ाई की भी आवश्यकता होती है। यह उन्हें एक दूसरे के खिलाफ नहीं तैर सकता है क्योंकि यह नहीं जानता कि div के संबंध में प्रत्येक अवधि कितनी जगह पर कब्जा कर लेगी। स्पैन स्वाभाविक रूप से इनलाइन तत्व होते हैं जबतक कि आप उन्हें अन्यथा परिभाषित नहीं करते हैं, इसलिए उन्हें केवल फ्लोट के बिना उस तरीके को प्रदर्शित करना चाहिए।