2012-12-11 4 views
11

メニュー項目の最後の単語の直後に、それぞれの(複数の)項目に画像rightarrow.pngがあります。問題は時にはこの矢印が改行に入り、それが起こらないようにすることです。私はHTML - テキストと画像の間にスペースを入れないでください

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

を試みたが、それは狂気私を運転だ

Blah blah 
> 

のように、まだいくつかのケースではそれが見えます。

+0

あなたが行った全コードを追加してください – user7282

+1

さらに多くのコード、特にCSSを表示する必要があるかもしれません。 JSFiddleが理想的です。 – greener

+1

真剣に?徹底するためにPHPエラーログを含める必要がありますか?さあ、どのような状況でも、スペースを壊すはずの要素のイメージとテキストの間に空白がないことを確実にする方法を教えてください。 – L84

答えて

14

すべてのテキストを要素に入れ、イメージを別のラッパーに入れます。親にwhite-space:nowrapを追加します。

+0

単語間にスペースが入りますか?なぜなら、画像と前の単語との間に隙間を空けてはならないからです。 – L84

+1

@ L84テキストコンテナに幅を設定すると、空白は新しい行に改行されます。 –

+0

いいえ、idが壊れていない、それはすべて1行にあります。恐らくwhite-space:nowrapが有効なためです。 – L84

1

これをチェックする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

4

これは、閲覧状況全体に働く方法です:

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

nobrタグは何らかの奇妙な理由でHTML仕様に到達しませんでしたが、これが動作するのを妨げるものではありません。あなただけの仕様に準拠している場合は、代わりにclumsier CSSを使用します。

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

) –

+0

良い答えですが、受け入れられました。 htmlテンプレートを使用する場合(例えば、テキストがレンダリングの代わりに使用される場合)に適しています。 希望、あなたは私の心を持っています。 – Dmitry

0

は、画像にposition: absolute;ルールを追加します。左/右の位置を追加しないと、インラインであるかのように表示されます。

関連する問題