html - How can I ensure that an icon will be on the same line as text, and not on a new line? -

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

मुझे सेटिंग

< pre> <कोड> अवधि {अधिकतम-चौड़ाई: 140px; प्रदर्शन क्षेत्र; फ्लोट: बाइट}

लेकिन अब स्पैन में पाठ ली के नीचे ओवरलैप कर रहा है; यह ऊँचाई सही ढंग से स्थापित नहीं कर रहा है

---

मेरे पास एक विस्तार योग्य मेनू है जिसमें पाठ के बगल में एक प्लस / शून्य चिह्न है यह ऐसा दिखता है:

  & Lt; li वर्ग = "श्रेणी विस्तारणीय" & gt; & Lt; span & gt; कार्यक्रम और क्लिनिक & lt; / span & gt; & Lt; a href = "जावास्क्रिप्ट: शून्य (0)" वर्ग = "शो-द्वितीय-स्तर टॉगल" शैली = "प्रदर्शन: इनलाइन;" & gt; & Lt; i वर्ग = "एफए-प्लस" & gt; & lt; / i & gt; & Lt; / a & gt; & Lt; a href = "जावास्क्रिप्ट: शून्य (0)" वर्ग = "छिपा-द्वितीय-स्तर टॉगल" शैली = "प्रदर्शन: कोई नहीं;" & gt; & Lt; i वर्ग = "एफए-माइनस" & gt; & lt; / i & gt; & Lt; / a & gt; & Lt; / li & gt;  

मैं यह सुनिश्चित करना चाहता हूं कि विस्तार आइकन हमेशा एक ही पंक्ति पर पाठ के रूप में होता है, क्योंकि यह अपनी लाइन पर होने के लिए खराब दिखता है। यदि "क्लिनिक" को ठीक से अगली पंक्ति तक ले जाना है, लेकिन मैं यह कैसे सुनिश्चित कर सकता हूं कि आइकन पाठ के नीचे स्वयं को समाप्त नहीं करता?

आप छवि पूर्ण ली और मार्जिन के साथ स्थान को संरक्षित कर सकते हैं।

< Div class = "snippet" data-lang = "js" डेटा-छुपिए = "गलत">

 < कोड> .category {सीमा: 1px ठोस # 000000; स्थिति: रिश्तेदार; चौड़ाई: 140px; }। श्रेणी & gt; अवधि {मार्जिन-दाएं: 30px; प्रदर्शन क्षेत्र; }। श्रेणी एक {डिस्प्ले: ब्लॉक; चौड़ाई: 30px; ऊंचाई: 30px; प्रदर्शन क्षेत्र; स्थिति: पूर्ण; शीर्ष: 0; नीचे: 0; सही: 0; मार्जिन: ऑटो; } .category i.fa {background: url ('https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1'); चौड़ाई: 30px; ऊंचाई: 30px; प्रदर्शन क्षेत्र; }  

  & lt; li वर्ग = "श्रेणी विस्तारणीय" & gt; & Lt; span & gt; कार्यक्रम और क्लिनिक & lt; / span & gt; & Lt; a href = "जावास्क्रिप्ट: शून्य (0)" वर्ग = "शो-द्वितीय-स्तर टॉगल" & gt; & Lt; i वर्ग = "एफए-प्लस" & gt; & lt; / i & gt; & Lt; / a & gt; & Lt; a href = "जावास्क्रिप्ट: शून्य (0)" वर्ग = "छिपा-द्वितीय-स्तर टॉगल" शैली = "प्रदर्शन: कोई नहीं;" & gt; & Lt; i वर्ग = "एफए-माइनस" & gt; & lt; / i & gt; & Lt; / a & gt; & Lt; / li & gt; & Lt; li वर्ग = "श्रेणी विस्तारणीय" & gt; & Lt; span & gt; बहुत लंबे टेक्स्ट के साथ टेस्ट 2 ... और एक तीसरी पंक्ति & lt; / span & gt; & Lt; a href = "जावास्क्रिप्ट: शून्य (0)" वर्ग = "शो-द्वितीय-स्तर टॉगल" & gt; & Lt; i वर्ग = "एफए-प्लस" & gt; & lt; / i & gt; & Lt; / a & gt; & Lt; a href = "जावास्क्रिप्ट: शून्य (0)" वर्ग = "छिपा-द्वितीय-स्तर टॉगल" शैली = "प्रदर्शन: कोई नहीं;" & gt; & Lt; i वर्ग = "एफए-माइनस" & gt; & lt; / i & gt; & Lt; / a & gt; & Lt; / li & gt;