使列表自动拉伸到容器宽度

Question

我有一个这样的清单：

＆＃13;

＆＃13;

.header-top {
  margin-bottom: 0.625em; /* 10/16 */
}
.nav{
    padding: 0;
}
.top-nav ul li{
    display: inline-block;
}
.top-nav ul li div{
    background-color: #f4f4f4;
    padding: 1em 0;
    margin: 1px;
    -webkit-box-shadow: 0.0625em 0.0625em 0.0625em #000000; /* 1/16 */ /* 1/16 */ /* 1/16 */
    -moz-box-shadow: 0.0625em 0.0625em 0.0625em #000000; /* 1/16 */ /* 1/16 */ /* 1/16 */
    box-shadow: 0.0625em 0.0625em 0.0625em #000000; /* 1/16 */ /* 1/16 */ /* 1/16 */
}
.top-nav ul{
    display: table;
    width: 100%;
    padding: 0;

}
.top-nav ul li a{
	display:block;
	text-decoration:none;
	margin: 0 0.3em;
	color:#363636;
	font-family: Arial;
    text-transform: uppercase;
}

＆＃13;

<div class="col-md-9">
  <div class="header-top ">
        <div class="nav">
          <div class="top-nav" id="nav1">
            <ul>
              <li>
                <div><a href="#">About</a></div>
              </li>
              <li>
                <div><a href="#">For Company</a></div>
              </li>
              <li>
                <div><a href="#">For Enterns</a></div>
              </li>
              <li>
                <div><a href="#">For Partner</a></div>
              </li>
              <li>
                <div><a href="#">For Sales</a></div></li>
              <li>
                <div><a href="#">Network</a></div>
              </li>
              <li>
                <div><a href="#">Club</a></div>
              </li>
              <li>
                <div><a href="#">Case study</a></div>
              </li>
              <li>
                <div><a href="#">Public Service</a></div>
              </li>
              <li>
                <div><a href="#">Donation</a></div>
              </li>
              <li>
                <div><a href="#">Brand</a></div>
              </li>
              <li>
                <div><a href="#">LIBRARY</a></div>
              </li>
              <li>
                <div><a href="#">BOOKS</a></div>
              </li>
              <li>
                <div><a href="#">OTHERS</a></div>
              </li>
            </ul>
          </div>  
          <div class="clearfix"></div>
        </div>
      </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这是一个菜单。如果它溢出，我希望它断行，所以我将显示设置为<li>内联块。它起作用，但我希望每一行都充满它的容器。我怎么能这样做？

Answer 1

像这样使用.top-nav ul { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; list-style-type: none; } .top-nav ul li { flex: 1; } 可能是一个选项

规则已更改：

white-space: nowrap;

如果主播上有text-align: center，则其文字不会中断，而.header-top { margin-bottom: 0.625em; /* 10/16 */ } .nav{ padding: 0; } .top-nav ul { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; list-style-type: none; } .top-nav ul li { flex: 1; } .top-nav ul li div{ background-color: #f4f4f4; padding: 1em 0; margin: 1px; -webkit-box-shadow: 0.0625em 0.0625em 0.0625em #000000; /* 1/16 */ /* 1/16 */ /* 1/16 */ -moz-box-shadow: 0.0625em 0.0625em 0.0625em #000000; /* 1/16 */ /* 1/16 */ /* 1/16 */ box-shadow: 0.0625em 0.0625em 0.0625em #000000; /* 1/16 */ /* 1/16 */ /* 1/16 */ } .top-nav ul li a{ display:block; text-decoration:none; margin: 0 0.3em; color:#363636; font-family: Arial; text-transform: uppercase; white-space: nowrap; text-align: center; }会使文字居中

示例代码段

＆＃13;

＆＃13;

<div class="col-md-9">
  <div class="header-top ">
        <div class="nav">
          <div class="top-nav" id="nav1">
            <ul>
              <li>
                <div><a href="#">About</a></div>
              </li>
              <li>
                <div><a href="#">For Company</a></div>
              </li>
              <li>
                <div><a href="#">For Enterns</a></div>
              </li>
              <li>
                <div><a href="#">For Partner</a></div>
              </li>
              <li>
                <div><a href="#">For Sales</a></div></li>
              <li>
                <div><a href="#">Network</a></div>
              </li>
              <li>
                <div><a href="#">Club</a></div>
              </li>
              <li>
                <div><a href="#">Case study</a></div>
              </li>
              <li>
                <div><a href="#">Public Service</a></div>
              </li>
              <li>
                <div><a href="#">Donation</a></div>
              </li>
              <li>
                <div><a href="#">Brand</a></div>
              </li>
              <li>
                <div><a href="#">LIBRARY</a></div>
              </li>
              <li>
                <div><a href="#">BOOKS</a></div>
              </li>
              <li>
                <div><a href="#">OTHERS</a></div>
              </li>
            </ul>
          </div>  
          <div class="clearfix"></div>
        </div>
      </div>
</div>

＆＃13;

2.1

＆＃13;

＆＃13;

＆＃13;