我在将导航栏的下拉列表(“链接”)与导航栏上的其余链接对齐时遇到了一些麻烦。
这是我的第一个项目之一,所以我有点困惑我应该在哪里编辑我当前的代码,以便正确排列。任何帮助???
显然,我实际上期望/尝试做的是将“链接”下拉按钮与导航栏链接的其余部分对齐。
如果有人可以提供帮助,将不胜感激!
/* 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>
您可以将导航栏中的内容放入flexbox
并垂直居中。
试试这个:
.navbar {
display: flex;
align-items: center;
}
希望能帮助到你!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句