Flex Navbar теряет центрирование - PullRequest
Новая
       23

Flex Navbar теряет центрирование

0 голосов
/ 28 мая 2019

Ручка здесь.

HTML 

<header>
  <div id="logo-div">
    MyLogo
  </div>
  <nav>
    <ul class="nav-list">
      <li class="item">LINK #1</li>
      <li class="item">LINK #2</li>
      <li class="item">LINK #3</li>
      <li class="item">LINK #4</li>
      <li class="item">LINK #5</li>
    </ul>
  </nav>
</header>

CSS 

header{
  display: inline-block;
  width: 90%;
}

#logo-div{
  margin-right: 50px;
  float: left;
  font-size: 28px;
  color: red;
  font-weight: 800;
  line-height: 60px;
}

nav{
  float: right;
}

.nav-list{
  display: flex;
  height: 150px;
  width: auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  align-content: flex-start;
  margin: 0%;
  padding: 0%;
  width: auto;
  list-style-type: none;
}

.item{
  background-color: #d6315d;
  height: 50px;
  width: 150px;
  margin: 5px;
  text-align: center;
  line-height: 45px;
  font-weight: 600;
}

Типичный заголовок веб-сайта с отображением встроенного блока, логотипом div слева и панелью навигации справа. Мне нужна гибкая навигационная панель для размещения устройств различной ширины, по крайней мере, до ширины экрана = 600 пикселей, где он может быть изменен на гамбургер. Поэтому я делаю высоту навигационного списка в 3 раза больше высоты элемента списка. Проблема заключается в том, что если я перемещу блок навигации вправо в заголовке, список элементов навигации будет только оборачиваться под логотипом div, а не рядом с ним. Я могу решить эту проблему, полностью удалив float из блока nav. Но теперь навигационный блок смещается влево при увеличении, поэтому вся страница выглядит не в центре.

У кого-нибудь есть идеи?

1 Ответ

1 голос
/ 28 мая 2019

Если я правильно понимаю, у вас есть проблема с элементами, которые не выровнены, когда экран меньше.Лучший способ сделать это - использовать display: flex, чтобы выполнить выравнивание легко.Я сделал пример кода и надеюсь, что он поможет вашей проблеме (align-items-center выравнивает все элементы, включая ваш логотип, по центру в строке при изменении размера экрана. Если вам это не нужно, вы можете удалить его)

HTML 

<header>
  <div class="d-flex flex-row align-items-center">
    <div class="logo">
      MyLogo
    </div>
    <nav>
      <ul class="nav-list">
        <li class="item">LINK #1</li>
        <li class="item">LINK #2</li>
        <li class="item">LINK #3</li>
        <li class="item">LINK #4</li>
        <li class="item">LINK #5</li>
      </ul>
    </nav>
  </div>
</header>

CSS 

.nav-list {
  display: flex;
  width: auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  margin: 0%;
  padding: 0%;
  list-style-type: none;
}

.item {
  background-color: #d6315d;
  height: 50px;
  width: 150px;
  margin: 5px;
  text-align: center;
  line-height: 45px;
  font-weight: 600;
}

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.align-items-center {
  align-items: center;
}

.logo {
  margin-right: 50px;
  font-size: 28px;
  color: red;
  font-weight: 800;
}

JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/7u36m194/

...