メニュー項目の最後の単語の直後に、それぞれの(複数の)項目に画像rightarrow.pngがあります。問題は時にはこの矢印が改行に入り、それが起こらないようにすることです。私はHTML - テキストと画像の間にスペースを入れないでください
Blah blah <img src="rightarrow.png" />
を試みたが、それは狂気私を運転だ
Blah blah
>
のように、まだいくつかのケースではそれが見えます。
メニュー項目の最後の単語の直後に、それぞれの(複数の)項目に画像rightarrow.pngがあります。問題は時にはこの矢印が改行に入り、それが起こらないようにすることです。私はHTML - テキストと画像の間にスペースを入れないでください
Blah blah <img src="rightarrow.png" />
を試みたが、それは狂気私を運転だ
Blah blah
>
のように、まだいくつかのケースではそれが見えます。
これをチェックする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
これは、閲覧状況全体に働く方法です:
Blah <nobr>blah <img src="rightarrow.png" /></nobr>
nobr
タグは何らかの奇妙な理由でHTML仕様に到達しませんでしたが、これが動作するのを妨げるものではありません。あなただけの仕様に準拠している場合は、代わりにclumsier CSSを使用します。
Blah <span style="white-space: nowrap">blah <img src="rightarrow.png" /></span>
) –
良い答えですが、受け入れられました。 htmlテンプレートを使用する場合(例えば、テキストがレンダリングの代わりに使用される場合)に適しています。 希望、あなたは私の心を持っています。 – Dmitry
は、画像にposition: absolute;
ルールを追加します。左/右の位置を追加しないと、インラインであるかのように表示されます。
あなたが行った全コードを追加してください – user7282
さらに多くのコード、特にCSSを表示する必要があるかもしれません。 JSFiddleが理想的です。 – greener
真剣に?徹底するためにPHPエラーログを含める必要がありますか?さあ、どのような状況でも、スペースを壊すはずの要素のイメージとテキストの間に空白がないことを確実にする方法を教えてください。 – L84