Question

我是网络开发的新手，99％的时间我可以研究并找到答案，但我已经付出了努力并完成了我认为可以做到的事情。我觉得这个问题很简单，但它现在已经超出了我现在解决的能力。

我想要一个横跨网站顶部的全宽导航栏，每个链接均匀分布。

This link帮助我完成了接近这一点的事情，但让元素集中并紧密结合在一起，这不是我想要的风格。最后，通过左右边缘的游戏，我得到的元素在我的屏幕上均匀分布。

但是当我点击最大化/恢复按钮并且窗口变小时，我的导航栏就会折叠，因此它会分成两行，而不是一行，每行六行。网页的其余部分相应地调整到较小的窗口，但导航栏似乎环绕适合。

我的代码（上面link I posted的变体）：

HTML

 <div id="nav">
                <nav>
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="">Writers</a></li>
                        <li><a href="">Tales</a></li>
                        <li><a href="">About</a></li>
                        <li><a href="">Art</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
               </nav>
</div>

CSS

#nav {
    width: 100%;
    float: left;
    margin: 0 0 1em 0;
    padding: 0;
}
#nav ul {
    list-style: none;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    font-size: 18px;
    text-shadow: 1px 1px #babbbc;
}
#nav li {
    margin: 0 115px 0 120px;;
    float: left; }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #727272;
    border-right: 1px hidden #ccc; }
#nav li:first-child a {
    border-left: 1px hidden #ccc; }

Answer 1

您可以将flex用作display。如果属性flexbox设置为width，height会自动设置其flex-grow和1以均匀分布所有项目。对于全宽：将width设置为100%，并确保父元素也具有完整尺寸，例如body。

有关Flexbox：here's a very detailed explanation。

的详情

以下是一个例子：

#nav {
  width: 100%;
  background-color:lawngreen;
  border: 4px solid black;
  text-align: center;
}

#nav li {
  background-color: green;
  padding: 10px 5px 10px 5px;
  flex-grow: 1;
  margin: 0px 10px 0px 10px;
}

#nav ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  padding: 0;
}

<body>
  <div id="nav">
      <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
          <li>item 4</li>
          <li>item 5</li>
      </ul>
  </div>
</body>

全宽导航栏与屏幕折叠

1 个答案: