如何使子元素将其父元素的宽度一分为二[重复]

Question

这个问题已经在这里有了答案：

• 我如何才能使导航栏居中且链接同样宽？ 1个答案

我写了这样一个导航栏：

 .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; } 

 <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> 

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

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

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

那么有什么办法可以做到这一点？

Answer 1

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

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

Flexbox教程

 .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玩。 检查下面的代码段。

 .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; } 

 <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>