UL 不拉伸宽度以填充 div 的空间

Question

我正在尝试让我的ul（包含li元素）根据需要拉伸以填充它所在的div的可用宽度，但由于某种原因它不起作用。我尝试使用display: table;和table-layout: fixed;但它们也不适合我。

.wrapper {
  width: 90%;
  height: auto;
  margin: 10px auto 10px auto;
  border: 2px solid #000000;
  background-color: #0099cc;
}
#menu {
  background: #ffffff;
  margin-bottom: 50px;
}
#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
  zoom: 1;
  display: table;
}
#menu ul:after {
  content: ' ';
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#menu ul li {
  float: left;
  display: block;
  padding: 0;
  display: table-cell;
}
#menu ul li a {
  color: #000;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Work Sans', sans-serif;
  font-size: 1.5em;
  font-weight: 500;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#menu ul li a:hover {
  color: #000;
}
#menu ul li a:hover:before {
  width: 100%;
}
#menu ul li a:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #000;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#menu ul li.last > a:after,
#menu ul li:last-child > a:after {
  display: none;
}
#menu ul li.active a {
  color: #000;
}
#menu ul li.active a:before {
  width: 100%;
}

<div class="wrapper">
  <div>
    <h1>Page title</h1>
  </div>
  <div id="menu">
    <ul>
      <li><a><span>January</span></a>
      </li>
      <li><a><span>February</span></a>
      </li>
      <li><a><span>March</span></a>
      </li>
      <li><a><span>April</span></a>
      </li>
      <li><a><span>May</span></a>
      </li>
      <li><a><span>June</span></a>
      </li>
      <li><a><span>July</span></a>
      </li>
      <li><a><span>August</span></a>
      </li>
      <li><a><span>September</span></a>
      </li>
      <li><a><span>October</span></a>
      </li>
      <li><a><span>November</span></a>
      </li>
      <li><a><span>December</span></a>
      </li>
      <li><a><span>Spring</span></a>
      </li>
      <li><a><span>Summer</span></a>
      </li>
      <li><a><span>Autumn</span></a>
      </li>
      <li><a><span>Winter</span></a>
      </li>
    </ul>
  </div>
</div>

Answer 1

对于动态空间填充布局，您必须查看使用 CSS flexbox。目前使用的大多数现代浏览器实际上都支持它（85% 无前缀，97% 全局），因此您可以将其视为对不使用浏览器的用户的优雅降级，或者对于使用;)的浏览器的用户进行渐进增强

您需要更改的只是以下内容：

1. 在 <ul> 元素上使用 display: flex，并通过设置 flex-wrap: wrap 允许在其中进行包装
2. 在内部<li>元件上沟float: left。使用 flex-grow: 1 允许它们填充每行的剩余空间。
3. 为了获得更好的视觉效果，请在嵌套的 <a> 元素上使用text-align: center，以便月份在所有链接中以视觉居中显示。

.wrapper {
  width: 90%;
  height: auto;
  margin: 10px auto 10px auto;
  border: 2px solid #000000;
  background-color: #0099cc;
}
#menu {
  background: #ffffff;
  margin-bottom: 50px;
}
#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  /* Added the following for flexbox */
  display: flex;
  flex-wrap: wrap;
}
#menu ul:after {
  content: ' ';
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#menu ul li {
  display: block;
  padding: 0;
  /* Added the following for flexbox */
  flex-grow: 1;
}
#menu ul li a {
  color: #000;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Work Sans', sans-serif;
  font-size: 1.5em;
  font-weight: 500;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
  /* Added the following for flexbox */
  /* So that text appear visually centered */
  text-align: center;
}
#menu ul li a:hover {
  color: #000;
}
#menu ul li a:hover:before {
  width: 100%;
}
#menu ul li a:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #000;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#menu ul li.last > a:after,
#menu ul li:last-child > a:after {
  display: none;
}
#menu ul li.active a {
  color: #000;
}
#menu ul li.active a:before {
  width: 100%;
}

<div class="wrapper">
  <div>
    <h1>Page title</h1>
  </div>
  <div id="menu">
    <ul>
      <li><a><span>January</span></a>
      </li>
      <li><a><span>February</span></a>
      </li>
      <li><a><span>March</span></a>
      </li>
      <li><a><span>April</span></a>
      </li>
      <li><a><span>May</span></a>
      </li>
      <li><a><span>June</span></a>
      </li>
      <li><a><span>July</span></a>
      </li>
      <li><a><span>August</span></a>
      </li>
      <li><a><span>September</span></a>
      </li>
      <li><a><span>October</span></a>
      </li>
      <li><a><span>November</span></a>
      </li>
      <li><a><span>December</span></a>
      </li>
      <li><a><span>Spring</span></a>
      </li>
      <li><a><span>Summer</span></a>
      </li>
      <li><a><span>Autumn</span></a>
      </li>
      <li><a><span>Winter</span></a>
      </li>
    </ul>
  </div>
</div>