全宽导航栏随屏幕折叠答案

【问题标题】：full width navbar collapses with screen全宽导航栏随屏幕折叠
【发布时间】：2017-11-28 17:30:39
【问题描述】：

我是 Web 开发的新手，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; }

【问题讨论】：

你能包含整个相关代码吗？另外，请注意，这篇文章是 2009 年的。每件事都有新的方法。您想了解不同的方法吗？
我很想知道一种不同的方法。这是我第一次发布，我还应该发布什么代码？我尝试过其他解决方案，而这个最适合。

标签： html css

【解决方案1】：

您可以将flex 用作display。如果属性flex-grow 设置为1，则flexbox 自动设置其width 和height 以均匀分布所有项目。对于全宽：将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>

【讨论】：

谢谢，这比我以前的好多了。有什么办法可以根据窗口大小缩小链接之间的边距？
是的，当然！转到解释页面，向下滚动直到找到“示例”。您可以在此处找到示例的代码：codepen.io/team/css-tricks/pen/EKEYob