Mam więc menu, w którym każdy element (multilinii) ma obraz rightarrow.png zaraz po ostatnim słowie pozycji menu. Problem polega czasem na tym, że strzała wchodzi sama w linię, i chcę to powstrzymać. PróbowałemHTML - niezłamanie odstępu między tekstem a obrazem
Blah blah <img src="rightarrow.png" />
ale nadal w niektórych przypadkach wygląda na to
Blah blah
>
To doprowadza mnie do szału.
Umieść cały tekst w elemencie, a następnie umieść obraz w innym opakowaniu. Dodaj white-space:nowrap do swojego rodzica.
Czy będą przerwy między słowami? Ponieważ nie muszę się po prostu łamać przestrzeni między obrazem a poprzednim słowem. – L84
@ L84 Jeśli ustawisz szerokość w kontenerze tekstowym, spacje zostaną podzielone na nowe wiersze. –
Nie, id nie pęka, wszystko jest w jednym wierszu - prawdopodobnie dlatego, że białe znaki: nowrap to efekt – L84
Sprawdź to BIN. Zrobiłem to, zakładając, że to jest to, czego potrzebujesz.
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; }
Sprawdź here więcej szczegółów
Jest to metoda, która działa w całej sytuacji przeglądania:
Blah <nobr>blah <img src="rightarrow.png" /></nobr>
Znacznik nobr nigdy nie dostał specyfikacji HTML, z jakiegoś dziwnego powodu, ale to nie przeszkadza w pracy. Jeśli po prostu muszą spełniać specyfikacje, użyj nieporadnego CSS zamiast:
Blah <span style="white-space: nowrap">blah <img src="rightarrow.png" /></span>
To powinno być zaakceptowaną odpowiedzią –
Dobra odpowiedź, ale zaakceptowana jest lepszy w przypadku używania szablonów html (np. gdy tekst zastępuje renderowanie). Mam nadzieję, że masz rozum. – Dmitry
Dodaj position: absolute; regułę do obrazu; Będzie on wyświetlany tak, jakby był wstawiany, jeśli nie dodasz do niego pozycji lewej/prawej.
dodaj pełny kod, który zrobiłeś – user7282
Może będziesz musiał pokazać więcej kodu, szczególnie CSS. JSFiddle byłby idealny. – greener
Poważnie? Czy muszę dołączyć dziennik błędów php, aby być dokładnym? No dalej, jak zapewnić, że nigdy nie będzie w żadnym wypadku przerwy pomiędzy obrazem a tekstem w elemencie, w którym w innym przypadku powinny być przerywane spacje. – L84