Блог

Главная - Вопросы по программированию - Как получить логотип и название панели навигации в том же пространстве, что и навигационные ссылки?

Как получить логотип и название панели навигации в том же пространстве, что и навигационные ссылки?

#html #css

#HTML #css

Вопрос:

Я учусь создавать веб-сайт и наткнулся на проблему.

Я попробовал пару вещей, но проблема остается. Навигационный бренд включен в то же поле, что и навигационный, но не внутри того же, что и навигационные ссылки.

Я хочу, чтобы логотип и текст навигационного бренда располагались слева и были той же высоты, что и навигационные ссылки.

HMTL

 <nav>
    <div class="nav-brand">
      <a>BIKE</a>
    </div>
    <div class="hamburger">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>   
    <ul class="nav-links">
      <li><a href="#">About</a></li>
      <li><a href="#">Design</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

CSS

 nav {
  height: 10vh;
  background: transparent;
}

.nav-links {
  display: flex;
  list-style: none;
  width: 50%;
  height: 100%;
  justify-content: space-around;
  align-items: center;
  margin-left: auto;
}

.nav-links li a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.nav-brand {
  padding: 0px;
  margin: 0px;
}

Ответ №1:

 nav {
  height: 10vh;
  background: transparent;
}

.nav-links {
  display: flex;
  list-style: none;
  width: 50%;
  justify-content: space-around;
  align-items: center;
  margin-left: auto;
}

.nav-links li a {
  color: blue;
  text-decoration: none;
  font-size: 16px;
}

.nav-brand {
  padding: 0px;
  margin: 0px;
  display: inline-block;
  float: left;
} 
 <nav>
    <div class="nav-brand">
      <a>BIKE</a>
    </div>
    <div class="hamburger">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>   
    <ul class="nav-links">
      <li><a href="#">About</a></li>
      <li><a href="#">Design</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

Комментарии:

1. там нет ничего особенного, только использование свойств height и float

Ответ №2:

Вы также можете добавить отображение flex в элементе навигации.

 nav {
  height: 10vh;
  background: transparent;
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  list-style: none;
  width: 50%;
  height: 100%;
  justify-content: space-around;
  align-items: center;
  margin-left: auto;
}

.nav-links li a {
  color: black;
  text-decoration: none;
  font-size: 16px;
}

.nav-brand {
  padding: 0px;
  margin: 0px;
}
Метки: ,