Как выровнять мой раскрывающийся список панели навигации с остальными ссылками моей панели навигации?

У меня возникли небольшие проблемы с выравниванием раскрывающегося списка моей панели навигации ("Ссылки") с остальными ссылками на панели навигации.

Это один из моих первых проектов, поэтому я немного запутался в том, где я должен редактировать свой текущий код, чтобы он правильно выстраивался. Любая помощь???

Вот скриншот проблемы: Как выровнять мой раскрывающийся список панели навигации с остальными ссылками моей панели навигации?

Как выровнять мой раскрывающийся список панели навигации с остальными ссылками моей панели навигации? Очевидно, что я на самом деле ожидаю/пытаюсь сделать, это выровнять кнопку раскрывающегося списка «Ссылки» с остальными ссылками на панели навигации.

Если кто-нибудь может помочь, это будет оценено!

/* Navbar Container */

.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Raleway, sans-serif;
}


/* Navbar Links */

.navbar a {
  display: inline-block;
  list-style-type: none;
  float: none;
  font-size: 1rem;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* Links Container */

.links {
  display: inline-block;
  float: none;
  overflow: hidden;
}


/* Links Button */

.links .linksbutton {
  font-size: 1rem;
  font-family: inherit;
  background-color: inherit;
  color: white;
  border: none;
  outline: none;
  margin: 0;
  padding: 14px 16px;
}


/* Hover Color */

.navbar a:hover,
.links:hover .linksbutton {
  background-color: red;
}


/* Dropdown Content */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Dropdown Links */

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}


/* Dropdown Links Hover Color */

.dropdown-content a:hover {
  background-color: #ddd;
}


/* Show Dropdown Menu on Hover */

.links:hover .dropdown-content {
  display: block;
}
<div class = "navbar">
  <a href = "#home">Home</a>
  <a href = "#about-us">About Us</a>
  <a href = "#music">Music</a>
  <a href = "#discography">Discography</a>
  <div class = "links">
    <button class = "linksbutton">Links</button>
    <div class = "dropdown-content">
      <a href = "https://tru-thoughts.co.uk/artists/quantic/" target = "_blank" rel = "noopener noreferrer">Tru Thoughts</a>
      <a href = "https://www.facebook.com/quanticmusic/" target = "_blank" rel = "noopener noreferrer">Facebook</a>
      <a href = "https://www.instagram.com/quanticmusic/?hl=en" target = "_blank" rel = "noopener noreferrer">Instagram</a>
      <a href = "https://en.wikipedia.org/wiki/Will_Holland" target = "_blank" rel = "noopener noreferrer">Wikipedia</a>
      <a href = "https://quanticmusic.bandcamp.com/" target = "_blank" rel = "noopener noreferrer"> Bandcamp</a>
      <a href = "https://www.discogs.com/artist/161443-Will-Holland" target = "_blank" rel = "noopener noreferrer">Discogs</a>
    </div>
  </div>
</div>

Вам необходимо предоставить HTML в дополнение к вашему CSS, чтобы мы могли видеть вашу структуру dom.

Rowan Baker-French 27.07.2019 04:40

Этой информации недостаточно, не могли бы вы предоставить лучший скриншот, как я вижу, скриншотов нет, также предоставьте html-код.

Kanchan Tyagi 27.07.2019 04:42

@RowanBaker-French Извините, это было небрежно. Я отредактировал, чтобы включить HTML и дополнительные скриншоты. Спасибо

rhelli 27.07.2019 05:27

@GreatKT Извините, я отредактировал пару дополнительных скриншотов и HTML для панели навигации.

rhelli 27.07.2019 05:28
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
4
4
62
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Сделать float: "left" для <a></a> ссылок и <div></div>

Удалять

overflow:hidden;

из вашего класса ссылок.

Ответ принят как подходящий

Вы можете поместить контент внутри панели навигации в flexbox и отцентрировать его по вертикали.

Попробуй это:

.navbar {
  display: flex;
  align-items: center;
}

Надеюсь, поможет!

Другие вопросы по теме