Как сделать так, чтобы 2 nav перекрывались с помощью css

Question

У меня 2 встроенных навигационных элемента, и один из них расположен справа: 2 навигационных кода

Я бы хотел центрировать текст в первой навигационной панели, но не по центру экрана, а по центру экрана. Я думал, что самый простой способ решить эту проблему - сделать так, чтобы 2 навигационные карты перекрывались, но я не уверен. Мне было интересно, если кто-нибудь может помочь мне решить эту проблему?

header {
  font-size: 10px;
  letter-spacing: 1.025px;
  background-color: black;
  padding: 1em;
}

header>nav:nth-child(1) {
  float: right;
  background-color: red;
  padding: 1em 1em 1em 1em;
}

header nav {
  color: white;
  text-align: left;
}

header nav ul {
  list-style: none;
  display: inline-block;
  position: relative;
  padding: 0;
}

header nav ul li {
  display: inline;
  padding-left: 1em;
  padding-right: 1em;
}

<header>
  <nav>
    <a href="">MAGYAR</a> |
    <a href="">ENGLISH</a>
  </nav>
  <nav>
    <ul>
      <li><a href="index.html">RÓLAM</a></li>
      <li><a href="music.html">ZENE</a></li>
      <li><a href="design.html">GRAFIKA</a></li>
      <li><a href="gamedev.html">JÁTÉKFEJLESZTÉS</a></li>
    </ul>
  </nav>
</header>

Answer 1

Вы хотите, чтобы элементы навигации были центрированы на панели, игнорируя ширину элемента навигации справа?

Одним из способов было бы использование абсолютного позиционирования на красной навигационной панели, чтобы удалить его из потока.страницы.При удалении его из потока его ширина / высота будет игнорироваться, поэтому вы можете центрировать остальные элементы в навигационной панели на основе всего экрана.

Добавьте некоторое позиционирование в красную навигационную панель и убедитесь, что вы установилиheader будет position: relative.Наконец, измените значение text-align на center.

Имейте в виду: При удалении красной навигации из потока, возможно, что другие элементы навигации могут перекрывать красную навигацию в зависимости отРазмер экрана.Сделайте необходимые корректировки с помощью медиа-запросов или другого решения.

header {
  font-size: 10px;
  letter-spacing: 1.025px;
  background-color: black;
  padding: 1em;
  position: relative;
}

header>nav:nth-child(1) {
  position: absolute;
  top: 1em;
  right: 1em;
  bottom: 1em;
  background-color: red;
  padding: 1em 1em 1em 1em;
}

header nav {
  color: white;
  text-align: center;
}

header nav ul {
  list-style: none;
  display: inline-block;
  position: relative;
  padding: 0;
}

header nav ul li {
  display: inline;
  padding-left: 1em;
  padding-right: 1em;
}

<header>
  <nav>
    <a href="">MAGYAR</a> |
    <a href="">ENGLISH</a>
  </nav>
  <nav>
    <ul>
      <li><a href="index.html">RÓLAM</a></li>
      <li><a href="music.html">ZENE</a></li>
      <li><a href="design.html">GRAFIKA</a></li>
      <li><a href="gamedev.html">JÁTÉKFEJLESZTÉS</a></li>
    </ul>
  </nav>
</header>