如何在两条线上均匀分配导航选项？

Question

这是我的主要导航代码：

＆＃13;

＆＃13;

<nav id="nav-primary">
  <ul>
    <span class="nobr">
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#">Help</a>
      </li>
    </span>
    <span class="nobr">
      <li>
        <a href="#" class="active">Events</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </span>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

导航选项并排显示，当视口太窄时，选项总是分为3行和1行2个项目。

如何在有效的HTML中写这个？我知道我不应该将<span>放在<li>之外。

Answer 1

你必须使用media queries

注意：选择最适合您的断点

* {
  box-sizing: border-box
}
body,
ul {
  margin: 0
}
ul {
  font-size: 0;  /* fix inline-block gap */
  padding: 0;
}
li {
  list-style: none;
  width: 100%; /* 1 column */
  display: inline-block;
  font-size: 16px; /*reset font-size */
  background: lightyellow;
  text-align: center;
  border: 1px dotted red;
  margin:3px 0
}
@media (max-width: 768px) {
  li {
    width: 50%; /* 2 even columns */
    background: lightgreen
  }
}
@media (max-width: 468px) {
  li {
    width:calc( 100% / 3); /* 3 even columns */
    background: lightblue
  }
}

<nav id="nav-primary">
  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Help</a>
    </li>
    <li>
      <a href="#" class="active">Events</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

Answer 2

你可以使用css而不是html来处理它，所以html会是这样的：

<nav id="nav-primary">
  <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#">Help</a>
      </li>
      <li>
        <a href="#" class="active">Events</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
  </ul>
</nav>

并且在你的CSS中你将浮动：左转到li所以它们将是并排的当视口变得太窄时你可以使用媒体查询，这将提供另一种风格使你导航成两行像这个：

li{
  float:left;
  margin-right:10px;
}

@media only screen and (max-width: 481px) {
  li{
    width:31.33%;
    margin-right:2%;
  }
}

在之前的css中我给了一个宽度：31.33％到li所以它在第一行只有三个而在第二行只有两个

演示：https://jsfiddle.net/IA7medd/g22fgr5k/