एचटीएमएल - पाठ और छवि के बीच गैर-ब्रेकिंग स्पेस

Question

तो मेरे पास एक मेनू है जहां मेनू आइटम के अंतिम शब्द के बाद प्रत्येक (multiline) आइटम में एक छवि rightarrow.png है। समस्या कभी-कभी यह तीर स्वयं ही एक नई लाइन में जाती है, और मैं इसे होने से रोकना चाहता हूं। मैं

Blah blah&nbsp;<img src="rightarrow.png" /> 

लेकिन अभी भी कुछ मामलों में यह लग रहा है

तरह

Blah blah 
> 

यह मुझे पागल गाड़ी चला रहा है में करने की कोशिश की।

Answer 1

अपने सभी पाठ को तत्व में रखें, फिर छवि को दूसरे रैपर में रखें। अपने माता-पिता को white-space:nowrap जोड़ें।

Answer 2

यह BIN देखें। मैंने यह मानने के बाद इसे बनाया है कि आपको यही चाहिए।

एचटीएमएल

<ul> 
<li><p>Menu 1</p> <img src="http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png" align="right"/></li> 
<li><p>Menu 2</p> <img src="http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png" align="right"/></li> 
<li><p>Menu 3</p> <img src="http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png" align="right"/></li> 
<li><p>Menu 4</p> <img src="http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png" align="right"/></li> 
    </ul> 

Css

ul{ list-style-type:none;} 
ul li{ float:left; padding:10px; width:100px;} 
img{ width:20px;height:20px; float:left;} 
p{ float:left; margin:0px; } 

अधिक जानकारी के

Answer 3

इस विधि कि ब्राउज़िंग स्थितियों में काम करता है के लिए चेक here:

Blah <nobr>blah <img src="rightarrow.png" /></nobr> 

कुछ अजीब कारणों से nobr टैग कभी भी HTML चश्मा नहीं मिला, लेकिन यह इसे काम करने से नहीं रोकता है। तुम सिर्फ चश्मा का पालन करना होगा, तो इसके बजाय clumsier सीएसएस का उपयोग करें:

Blah <span style="white-space: nowrap">blah <img src="rightarrow.png" /></span> 

Answer 4

छवि के लिए एक position: absolute; नियम जोड़ें; यह प्रदर्शित होगा जैसे कि यदि आप इसमें बाएं/दाएं पोजिशनिंग नहीं जोड़ते हैं तो इसकी इनलाइन।