Победить GoogleChrome со списком

RedoxKit

Создатель
Регистрация
7 Окт 2008
Сообщения
26
Реакции
2
Пытаюсь сверстать дизайн в котором предусмотрен вывод списка <ul> <li></li></ul> с выравниванием по правой стороне блока.
В IE6,7,8. в FireFox и в Opera всё выводится нормально, а в Chrome маркеры выводятся по левой стороне один под одним, а текст пунка выравнивается по правой. Смотрите картинки.
IE8
6a1feb59341e.jpg

FF
3c5cf00398c2.jpg

GoogleChrome
c9c8ae15ddc5.jpg

Нужно чтобы в Хроме отображалось так как в остальных.
Тексты списка конечно будут разной длины! Поэтому вариант сделать оптимальную фиксированную ширину для всех <li> не подходит.
Пробовал разные варианты кода:
1. <div style="text-align:right; width: 250px;"><ul><li>проверка</li><li>проверка2</li></ul></div>
2. <div><ul style="text-align:right;"><li>проверка</li><li>проверка2</li></ul></div>
3. <div><ul><li style="text-align:right;">проверка</li><li>проверка2</li></ul></div>
4. <div><ul style="float:right; text-aling:right;"><li>проверка</li><li>проверка2</li></ul></div>
и другие вариации. Ничего не помогает.
Не могу найти метода чтобы маркеры прилепить к началу текста, так как это отображается в IE FF и Opera. Кто сталкивался с подобным? Как решили?
Спасибо.
 
проверил в хроме все отлично
HTML:
<div>	
	<ul style="float:right;">
		<li>проверка</li>
		<li>проверка2</li>
		<li>проверка152</li>
		<li>проверка542</li>
		<li>проверка6845521</li>
		<li>проверка26545341</li>
	</ul>
</div>
 
вот те (крест) скрин
attachment.php
 

Вложения

  • 11.png
    11.png
    13,4 KB · Просмотры: 33
проверил в хроме все отлично
HTML:
<div>	
	<ul style="float:right;">
		<li>проверка</li>
		<li>проверка2</li>
		<li>проверка152</li>
		<li>проверка542</li>
		<li>проверка6845521</li>
		<li>проверка26545341</li>
	</ul>
</div>
У вас получилось что выравнивание текста всёравно по левому краю, а блок прижат к правому. Нужно выравнивание текста по правому краю.
У вас:

  • провекра1
  • проверка2232
  • проверка33454534
А надо:
  • провекра1
  • проверка2232
  • проверка33454534
откройте эту страницу в хроме и например в лисе.
 
победил
HTML:
<div>
 <ul style="text-align:right; list-style-position: inside">
  <li>проверка</li>
  <li>проверка1</li>
  <li>проверка10</li>
  <li>проверка100</li>
  <li>проверка1000</li>
  <li>проверка10000</li>
 </ul>
</div>
 
Назад
Сверху