Question

我想创建一个类似于apple.com的大型导航栏。

我尝试从apple的导航栏重现：

导航栏中的li居中;
浏览器自动均匀地分配ul容器中每个li之间的空间（与flex-grow不同，如下所述： (SO Source)）;
调整大小时，仅调整li元素之间的空间大小浏览器的窗口。

HTML：

Array

CSS：

<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>

我在网上找不到诀窍。非常感谢你的帮助！

干杯！

Answer 1

我在这里使用了flexbox。

你也有一些不需要的属性设置，我清除了。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

根据评论进行了更新，使用justify-content: space-around;代替flex: 1了解商品

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

如何均匀分配＆amp;自动用容器中的水平列表项目与css ala apple

1 个答案: