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。 Most modern browsers in use today actually support it（85％无前缀，全球97％），因此您可以将其视为对不使用浏览器的用户的优雅降级，或对浏览器上的用户进行逐步增强;）

您需要更改的内容如下：

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