我想创建一个类似于 apple.com 的大型导航栏。
我试图从苹果的导航栏中重现的是:
- 导航栏中的 li 居中;
- 浏览器自动平均分配ul容器中每个li之间的空间 (与此处解释的 flex-grow 不同: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ );
- 调整大小时只调整 li 元素之间的空间 浏览器窗口。
html:
<nav id="gn">
<div id="gn-content">
<ul class="gn-menu">
<li class="gn-item gn-menu-brand"><a class="gn-link gn-link-brand" href="#"><span class="gn-link-span">Brand</span></a></li>
<li class="gn-item gn-menu-products"><a class="gn-link gn-link-products" href="#"><span class="gn-link-span">Products</span></a></li>
<li class="gn-item gn-menu-services"><a class="gn-link gn-link-services" href="#"><span class="gn-link-span">Services</span></a></li>
<li class="gn-item gn-menu-about"><a class="gn-link gn-link-about" href="#"><span class="gn-link-span">About</span></a></li>
<li class="gn-item gn-menu-contact"><a class="gn-link gn-link-contact" href="www.soundbody.io/contact"><span class="gn-link-span">Contact</span></a></li>
<li class="gn-item gn-menu-signin"><a class="gn-link gn-link-signin" href="#"><span class="gn-link-span">Sign In</span></a></li>
</ul>
</div>
</nav>
CSS:
#gn {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 44px;
background-color: #212121;
z-index: 1;
}
#gn #gn-content {
display: block;
position: relative;
max-width: 980px;
height: 44px;
margin: 0 auto;
padding: 0 22px;
opacity: 0.65;
z-index: 2;
}
#gn .gn-menu {
display: block;
position: relative;
width: auto;
height: 44px;
margin: 0 -10px;
padding: 0;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
z-index: 3;
}
#gn .gn-item {
display: inline-block;
position: relative;
width: auto;
height: 44px;
margin: 0 50px;
padding: 0 0px;
vertical-align: top;
opacity: 1;
z-index: 4;
}
#gn .gn-link {
display: inline-block;
position: relative;
width: auto;
height: 44px;
margin: 0 0;
padding: 0 10px;
color: white;
white-space: nowrap;
background-repeat: no-repeat;
background-position: center center;
background-origin: content-box;
z-index: 5;
}
#gn .gn-link-span {
display: block;
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
top: 50%;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
.gn-link-brand {
background-image: url("/img/brand.svg");
background-size: cover;
}
我在网上找不到技巧。非常感谢您的帮助!
干杯!
最佳答案
这里我使用了flexbox
。
您还设置了一些不需要的属性,我已将其清除。
#gn {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 44px;
background-color: #212121;
z-index: 1;
}
#gn #gn-content {
max-width: 980px;
height: 44px;
margin: 0 auto;
padding: 0 22px;
opacity: 0.65;
}
#gn .gn-menu {
display: flex; /* added property */
height: 44px;
margin: 0 -10px;
padding: 0;
list-style: none;
}
#gn .gn-item {
flex: 1; /* added property */
}
#gn .gn-link {
display: flex; /* added property */
justify-content: center; /* added property */
align-items: center; /* added property */
height: 44px;
color: white;
background-repeat: no-repeat;
background-position: center center;
background-origin: content-box;
}
#gn .gn-link-span {
display: block;
overflow: hidden;
}
.gn-link-brand {
background-image: url("/img/brand.svg");
background-size: cover;
}
<nav id="gn">
<div id="gn-content">
<ul class="gn-menu">
<li class="gn-item gn-menu-brand"><a class="gn-link gn-link-brand" href="#"><span class="gn-link-span">Brand</span></a></li>
<li class="gn-item gn-menu-products"><a class="gn-link gn-link-products" href="#"><span class="gn-link-span">Products</span></a></li>
<li class="gn-item gn-menu-services"><a class="gn-link gn-link-services" href="#"><span class="gn-link-span">Services</span></a></li>
<li class="gn-item gn-menu-about"><a class="gn-link gn-link-about" href="#"><span class="gn-link-span">About</span></a></li>
<li class="gn-item gn-menu-contact"><a class="gn-link gn-link-contact" href="www.soundbody.io/contact"><span class="gn-link-span">Contact</span></a></li>
<li class="gn-item gn-menu-signin"><a class="gn-link gn-link-signin" href="#"><span class="gn-link-span">Sign In</span></a></li>
</ul>
</div>
</nav>
根据评论更新,对元素使用 justify-content: space-around;
而不是 flex: 1
#gn {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 44px;
background-color: #212121;
z-index: 1;
}
#gn #gn-content {
max-width: 980px;
height: 44px;
margin: 0 auto;
padding: 0 22px;
opacity: 0.65;
}
#gn .gn-menu {
display: flex; /* added property */
justify-content: space-around; /* added property */
height: 44px;
margin: 0 -10px;
padding: 0;
list-style: none;
}
#gn .gn-link {
display: flex; /* added property */
justify-content: center; /* added property */
align-items: center; /* added property */
height: 44px;
color: white;
background-repeat: no-repeat;
background-position: center center;
background-origin: content-box;
}
#gn .gn-link-span {
display: block;
overflow: hidden;
}
.gn-link-brand {
background-image: url("/img/brand.svg");
background-size: cover;
}
<nav id="gn">
<div id="gn-content">
<ul class="gn-menu">
<li class="gn-item gn-menu-brand"><a class="gn-link gn-link-brand" href="#"><span class="gn-link-span">Brand</span></a></li>
<li class="gn-item gn-menu-products"><a class="gn-link gn-link-products" href="#"><span class="gn-link-span">Products</span></a></li>
<li class="gn-item gn-menu-services"><a class="gn-link gn-link-services" href="#"><span class="gn-link-span">Services</span></a></li>
<li class="gn-item gn-menu-about"><a class="gn-link gn-link-about" href="#"><span class="gn-link-span">About</span></a></li>
<li class="gn-item gn-menu-contact"><a class="gn-link gn-link-contact" href="www.soundbody.io/contact"><span class="gn-link-span">Contact</span></a></li>
<li class="gn-item gn-menu-signin"><a class="gn-link gn-link-signin" href="#"><span class="gn-link-span">Sign In</span></a></li>
</ul>
</div>
</nav>
关于html - 如何在带有 css ala apple 的容器中均匀地自动分配水平列表的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43558133/