如何使子元素将其父元素的宽度平分

Question

我写了一个这样的导航栏：

＆＃13;

＆＃13;

.site-nav ul {
  margin: 0;
  background-color: #09C;
  line-height: 52px;
}
.site-nav li {
  display: inline-block;
  font-size: 14px;
}
.site-nav a {
  display: inline-block;
}

＆＃13;

<nav class="site-nav">
  <ul>
    <li>
      <a href="#">首页</a>
    </li>
    <li>
      <a href="#">1</a>
    </li>
    <li>
      <a href="#">2</a>
    </li>
    <li>
      <a href="#">3</a>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

现在我需要每个<li>标记将ul（它的父级）的宽度平分。如果知道<li>的计数，我可以简单地给出<li>的百分比， 在这种情况下：

.site-nav li {
  width: 25%;
  display: inline-block;
  font-size: 14px;
}

但是，<li>是动态生成的（我使用razor），所以我不知道会生成多少<li>。

有没有办法实现这个目标？

Answer 1

使用flexbox，您可以将其设置为动态，因为您在子flex-grow:1中使用属性li，这将填充剩余可用空间

  

如果所有项目的flex-grow都设置为1，则剩余空间为。{1}}   容器将平均分配给所有儿童。

Flexbox Tutorial

.site-nav ul {
  margin: 0;
  background-color: #09C;
  line-height: 52px;
  display: flex
}
.site-nav li {
  flex: 1;
  font-size: 14px;
}

<nav class="site-nav">
  <ul>
    <li>
      <a href="#">首页</a>
    </li>
    <li>
      <a href="#">1</a>
    </li>
    <li>
      <a href="#">2</a>
    </li>
    <li>
      <a href="#">3</a>
    </li>
  </ul>
</nav>

Answer 2

您可以使用flexbox。请查看下面的代码段。

＆＃13;

＆＃13;

.site-nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  background-color: #09C;
  line-height: 52px;
  list-style: none;
}
.site-nav li {
  flex-grow: 1;
  flex-basis: 0;
  font-size: 14px;
  border: 1px solid white;
}
.site-nav a {
  display: inline-block;
}

＆＃13;

<nav class="site-nav">
  2 columns:
  <ul>
    <li>
      <a href="#">首页</a>
    </li>
    <li>
      <a href="#">1</a>
    </li>
  </ul>
  4 columns:
  <ul>
    <li>
      <a href="#">首页</a>
    </li>
    <li>
      <a href="#">1</a>
    </li>
    <li>
      <a href="#">2</a>
    </li>
    <li>
      <a href="#">3</a>
    </li>
  </ul>
  8 columns:
  <ul>
    <li>
      <a href="#">首页</a>
    </li>
    <li>
      <a href="#">1</a>
    </li>
    <li>
      <a href="#">2</a>
    </li>
    <li>
      <a href="#">3</a>
    </li>
    <li>
      <a href="#">首页</a>
    </li>
    <li>
      <a href="#">1</a>
    </li>
    <li>
      <a href="#">2</a>
    </li>
    <li>
      <a href="#">3</a>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;