Лучший способ, чем плавать: прямо в панели навигации?

0

Я создал горизонтальную панель навигации с использованием стилей, но я столкнулся с серьезной проблемой... Поскольку <li> является блочным элементом, я не могу выровнять его с помощью text-align:right, что не позволяет мне выровнять его должным образом. Я попытался использовать display:inline; синтаксис элемента списка, но это тоже не имеет никакого значения (что действительно имеет смысл).

Мой вопрос заключается в том, есть ли способ выравнивания горизонтального <li>, без использования float:right; ? Я хочу, чтобы он соответствовал текущему формату списка (который я настроил в соответствии с родительским div), а использование float - не очень хороший или безопасный метод. Вот скриншот того, что я получил до сих пор (макет немного испорчен из-за недавнего добавления изображения). Как вы можете видеть, мне удалось правильно разместить "Моя страница" и "Выход", но как только я добавлю что-то более "сложное" (например, "+", которое теперь помещено в обычный список), он становится испорченным... Я действительно не понимаю, как другие сайты справляются с этим.

  • 0
    опубликуйте свой код, пожалуйста, используя jsfiddle
  • 0
    Вы явно объявили их как block ? потому что display:list-item; li display:list-item; по умолчанию. => w3.org/TR/html-markup/li.html#li-display
Показать ещё 2 комментария
Теги:

2 ответа

1

Вы должны определить text-align: right для содержащего элемента

HTML:

<ul class="nav">
    <li class="menu">1</li>
    <li class="menu">2</li>
    <li class="menu">3</li>
    <li class="menu">4</li>
    <li class="menu">5</li>
</ul>

CSS:

.nav {
    text-align: right;
}

.menu {
    display: inline;
}

JSFiddle

Если хотите, вы можете разделить меню на левую и правую части. Добавьте или удалите заполнение и маржу при необходимости.

HTML:

<ul class="nav left-nav">
    <li class="menu">1</li>
    <li class="menu">2</li>
    <li class="menu">3</li>
</ul>
<ul class="nav right-nav">
    <li class="menu">4</li>
    <li class="menu">5</li>
</ul>

CSS:

.nav {
    margin: 0;
    padding: 0;
}

.left-nav {
    text-align: left;
}

.right-nav {
    text-align: right;
}

.menu {
    display: inline;
}

JSFiddle

Поделиться
  • 0
    Отличная информация, правда! Тем не менее, мне как бы нужно, чтобы половина меню была на одной стороне, и создание нового ul-элемента, кажется, создает пространство ... Вот изображение того, что я имею в виду: prntscr.com/1z21fk (и я попытался использовать span и вещи тоже, но это было неэффективно)
  • 0
    Вы можете иметь два списка, один для левой и один для правой части. Смотрите обновленный ответ.
Показать ещё 3 комментария
0

Здесь вы идете, я думаю, что это то, что вы ищете:

jsfiddle.net/Sdw5h/

Поделиться
  • 0
    Это метод, который я использовал, но, к сожалению, он завершает float:right , чего я действительно не хочу в этом контексте. РЕДАКТИРОВАТЬ: Подожди, только что увидел что-то интересное ... Я посмотрю дальше в ваш ответ.
  • 0
    Этот метод тоже будет работать, но он немного отличается от (несколько сложного) исходного кода (и мне не слишком удобно использовать <nav> ... Мне кажется, что-то новое для меня, что может означать проблемы совместимости с более старыми браузерами). В любом случае, спасибо.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню