Расположение ссылок с левой части header, а одна ссылка с правой части header

Question

У меня есть header, у которого часть ссылок находиться с левой стороны, а одна с правой. Я набросал что-то такое:

#username_header {
    float: right;
}

<nav>
    <a href='index.php'>Info</a>
    <a href='register.html'>Register</a>
    <a href='log_in.html'>Log In</a>
    <a id="username_header">test</a>
</nav>

Кто-то знает как сделать его на одном уровне с остальными ссылками?

Answer 1

Сколько можно многострадальный float мучать? Используйте современные решения наподобие flex или grid.

nav {
  display: flex;
  background-color: rgba(0, 0, 200, .2);
}

nav a {
  padding: .5rem;
  border: 1px dashed purple;
}

#username_header {
  margin-left: auto;
}

<nav>
  <a href='index.php'>Info</a>
  <a href='register.html'>Register</a>
  <a href='log_in.html'>Log In</a>
  <a id="username_header">test</a>
</nav>

БЛОГ НА HUSL

Расположение ссылок с левой части header, а одна ссылка с правой части header

Ответы (1 шт):