У меня возникли небольшие проблемы с выравниванием раскрывающегося списка моей панели навигации ("Ссылки") с остальными ссылками на панели навигации.
Это один из моих первых проектов, поэтому я немного запутался в том, где я должен редактировать свой текущий код, чтобы он правильно выстраивался. Любая помощь???
Очевидно, что я на самом деле ожидаю/пытаюсь сделать, это выровнять кнопку раскрывающегося списка «Ссылки» с остальными ссылками на панели навигации.
Если кто-нибудь может помочь, это будет оценено!
/* 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-код.
@RowanBaker-French Извините, это было небрежно. Я отредактировал, чтобы включить HTML и дополнительные скриншоты. Спасибо
@GreatKT Извините, я отредактировал пару дополнительных скриншотов и HTML для панели навигации.






Сделать float: "left" для <a></a> ссылок и <div></div>
Удалять
overflow:hidden;
из вашего класса ссылок.
Вы можете поместить контент внутри панели навигации в flexbox и отцентрировать его по вертикали.
Попробуй это:
.navbar {
display: flex;
align-items: center;
}
Надеюсь, поможет!
Вам необходимо предоставить HTML в дополнение к вашему CSS, чтобы мы могли видеть вашу структуру dom.