HTML - 文字和圖像之間的不間斷空格

因此，我有一個菜單，其中每個（多行）項目在菜單項的最後一個單詞後面都有一個圖像rightarrow.png。問題是有時候這個箭頭本身會進入換行符，我想阻止它發生。我試圖HTML - 文字和圖像之間的不間斷空格

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

，但仍然在某些情況下，它看起來像

Blah blah 
>

它的駕駛我瘋了。

來源

2012-12-11 L84

添加完成的代碼 – user7282

您可能需要顯示更多代碼，特別是CSS。 JSFiddle將是理想的。 – greener

認真嗎？我是否必須包含php錯誤日誌才能徹底？來吧，我如何確保在任何情況下，在一個元素中的圖像和文本之間永遠不會有空隙，否則應該有空格。 – L84

將所有文本放入元素中，然後將圖像放入另一個包裝中。將white-space:nowrap添加到他們的父母。

來源

2012-12-11 06:11:38

單詞之間會有空格嗎？因爲我只需要不成爲圖像和前面的單詞之間的突破空間。 – L84

@ L84如果在文本容器上設置寬度，則空格將打破新行。 –

不，id不會中斷，它全部在一行中 - 可能是因爲空白：nowrap生效 – L84

檢查此BIN。我假設這是你所需要的。

HTML

<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; }

檢查here更多細節

來源

2012-12-11 06:22:10

這是一個跨瀏覽情況的工作方法：

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

由於某種奇怪的原因，nobr標記從未達到過HTML規範，但這並不妨礙它的工作。如果你只需要符合規格，使用笨拙CSS來代替：

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

來源

2012-12-11 07:42:12

這應該是公認的答案 –

好的答案，但接受對於使用html模板的情況更好（例如，在呈現文本時替代文本）。希望，你有我的想法。 – Dmitry

添加position: absolute;規則的圖像;如果不添加左/右定位，它將顯示爲內聯。

來源

2017-01-12 18:59:56 mcrider

HTML - 文字和圖像之間的不間斷空格

回答

相關問題