Блог

Главная - Вопросы по программированию - Элементы LI имеют плавающий левый ряд для выравнивания вправо в контейнере?

Элементы LI имеют плавающий левый ряд для выравнивания вправо в контейнере?

#html #css

#HTML #css

Вопрос:

В этом коде элементы LI имеют float:left и выровнены по левому краю контейнера. Я хочу, чтобы они были выровнены по правому краю. Как мне это сделать с помощью CSS?

Например: [……………………………. Пункт 1.Пункт 2]

Вот HTML-код:

 <div class="menu">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
  </ul>
</div>

PS Порядок элементов LI не должен быть обратным.

Комментарии:

1. Вы пробовали float: right ?

Ответ №1:

Попробуйте это

 <div class="menu">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
  </ul>
</div>

CSS

 .menu
{ float:right;
}
.menu li
{ float:left;
}

Или используйте float:right to ul, например

 .menu ul
{ float:right;
}
.menu li
{ float:left;
}

Пример JSFiddle

Ответ №2:

Сделайте li s встроенным и поместите text-align:right ul 

 .menu li {
    display:inline;  
}
.menu ul {
    text-align:right;  
}

http://jsfiddle.net/XKARB/

Комментарии:

1. однако он потеряет маркеры в стиле списка. но я думаю, что он все равно их не хочет.

2. он выставил их напоказ слева, поэтому я предположил, что ему не нужен стиль списка

3. Это лучшее решение. Также display: inline-block; позволит LIS иметь ширину / высоту.

Ответ №3:

измените порядок символов li s в вашем html и используйте float: right

Комментарии:

1. Это невозможно, потому что источник LI является общим для нескольких шаблонов, которым может потребоваться прямой порядок элементов.

2. вы пробовали плавающее значение ul справа (внутри упаковочного div)?

3. я имею в виду использование float:left на li s и float:right на ul . может работать

4. Да, я попробовал text-align:right для контейнера, DIV. Не работает.

5. здесь все работает нормально. конечно, div нуждается в фиксированной ширине. если вы этого не хотите, вы можете прикрепить свой ul или div к правой стороне с position: absolute помощью и right: 0