Левый и правый выравнивают ссылки в <nav>

0

Есть ли симпатичнее и/или лучший способ, чтобы выровнять некоторые -elements в a nav справа, в то время как все остальные на левой стороне, чем при использовании поплавков?
float:right перемещает перемещенные элементы в верхнюю часть nav вместо того чтобы держать их там, где они были раньше, по высоте.
Это должно быть достаточно распространенной проблемой, чтобы иметь хорошее решение. clear:both; то и clear:both; -divs или css для исправления ущерба не являются действительно хорошими решениями.

Это в основном код, который у меня есть.

<nav>
  <!-- left-aligned -->
    <a href="#"><img src="img/logo.svg" /></a>
    <a href="#">Foo</a>
    <a href="#">Bar</a>
  <!-- right-aligned -->
    <a href="#">Potato</a>
    <a href="#">Tomato</a>
</nav>
  • 0
    Вы пытались добавить классы в <a>? Я не уверен, что это самый элегантный способ, но он, вероятно, сработает. Добавить поплавок: слева; и плавать: правильно; Вы также можете использовать 2 <ul> один слева один справа
Теги:
nav

1 ответ

3
Лучший ответ

Добавьте классы в свои a, как показано в html.

HTML:

   <nav>
      <!-- left-aligned -->
        <a class="left" href="#"><img src="img/logo.svg" /></a>
        <a class="left" href="#">Foo</a>
        <a class="left" href="#">Bar</a>
      <!-- right-aligned -->
        <a class="right" href="#">Potato</a>
        <a class="right" href="#">Tomato</a>
    </nav>

и css:

nav .left {
    float: left;
}

nav .right {
    float: right;
}

Кроме того, после того, как вы это сделаете, и если это не сработает, вы можете захотеть, чтобы ваша ширина навигатора была достаточно длинной, поэтому они не все скручиваются вместе. Например nav { width: 100%; } nav { width: 100%; }

  • 0
    Для этого требуется float: left, а также float: right, но, возможно, это лучшее решение.

Ещё вопросы

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