Html 如何在整个宽度上证明我的div中的所有链接？

我有这个索引菜单，我试图使div中的所有链接具有相同的宽度，因此它们总是填充容器

结果应该是：在div的开头，我们有

A

，在末尾我们有Z（或div中的最后一个元素）

正如你所看到的，它现在没有伸展。有什么办法吗

div{
宽度：100%；
显示：块；
边框：1px实心#000；
填充：10px；
}
a组{
显示：内联块；
}

将flexbox（

显示：flex

）与

对齐内容：间距结合使用在您的div上


div{
宽度：100%；
显示器：flex；
边框：1px实心#000；
填充：10px；
证明内容：之间的空间；
}
a组{
显示：内联块；
}

将flexbox（
显示：flex
）与
对齐内容：间距结合使用在您的div上


div{
宽度：100%；
显示器：flex；
边框：1px实心#000；
填充：10px；
证明内容：之间的空间；
}
a组{
显示：内联块；
}

这些规则可以：

display: flex;
justify-content: space-around;


div{
宽度：100%；
边框：1px实心#000；
填充：10px；
显示器：flex；
证明内容：周围的空间；
}
a组{
显示：内联块；
}

这些规则可以：

display: flex;
justify-content: space-around;


div{
宽度：100%；
边框：1px实心#000；
填充：10px；
显示器：flex；
证明内容：周围的空间；
}
a组{
显示：内联块；
}
我认为在这种情况下，最好使用flex，因此它可能类似于：

相同的html文件：

<div>
  <a href="Index.aspx?index=A">A</a>
  <a href="Index.aspx?index=B">B</a>
  <a href="Index.aspx?index=C">C</a>
  <a href="Index.aspx?index=D">D</a>
  <a href="Index.aspx?index=E">E</a>
  <a href="Index.aspx?index=F">F</a>
  <a href="Index.aspx?index=G">G</a>
  <a href="Index.aspx?index=H">H</a>
  <a href="Index.aspx?index=I">I</a>
  <a href="Index.aspx?index=J">J</a>
  <a href="Index.aspx?index=K">K</a>
  <a href="Index.aspx?index=L">L</a>
  <a href="Index.aspx?index=M">M</a>
  <a href="Index.aspx?index=N">N</a>
  <a href="Index.aspx?index=O">O</a>
  <a href="Index.aspx?index=P">P</a>
  <a href="Index.aspx?index=Q">Q</a>
  <a href="Index.aspx?index=R">R</a>
  <a href="Index.aspx?index=S">S</a>
  <a href="Index.aspx?index=T">T</a>
  <a href="Index.aspx?index=U">U</a>
  <a href="Index.aspx?index=V">V</a>
  <a href="Index.aspx?index=W">W</a>
  <a href="Index.aspx?index=X">X</a>
  <a href="Index.aspx?index=Y">Y</a>
  <a href="Index.aspx?index=Z">Z</a>
</div>

因此flex grow允许您这样做，但根据其定义，1是一个神奇的数字：

如果所有项目的flex grow设置为1，则
容器将平均分配给所有儿童

我希望它能对您有所帮助。
我认为在这种情况下，最好使用flex，因此它可以是：

相同的html文件：

<div>
  <a href="Index.aspx?index=A">A</a>
  <a href="Index.aspx?index=B">B</a>
  <a href="Index.aspx?index=C">C</a>
  <a href="Index.aspx?index=D">D</a>
  <a href="Index.aspx?index=E">E</a>
  <a href="Index.aspx?index=F">F</a>
  <a href="Index.aspx?index=G">G</a>
  <a href="Index.aspx?index=H">H</a>
  <a href="Index.aspx?index=I">I</a>
  <a href="Index.aspx?index=J">J</a>
  <a href="Index.aspx?index=K">K</a>
  <a href="Index.aspx?index=L">L</a>
  <a href="Index.aspx?index=M">M</a>
  <a href="Index.aspx?index=N">N</a>
  <a href="Index.aspx?index=O">O</a>
  <a href="Index.aspx?index=P">P</a>
  <a href="Index.aspx?index=Q">Q</a>
  <a href="Index.aspx?index=R">R</a>
  <a href="Index.aspx?index=S">S</a>
  <a href="Index.aspx?index=T">T</a>
  <a href="Index.aspx?index=U">U</a>
  <a href="Index.aspx?index=V">V</a>
  <a href="Index.aspx?index=W">W</a>
  <a href="Index.aspx?index=X">X</a>
  <a href="Index.aspx?index=Y">Y</a>
  <a href="Index.aspx?index=Z">Z</a>
</div>

因此flex grow允许您这样做，但根据其定义，1是一个神奇的数字：

如果所有项目的flex grow设置为1，则
容器将平均分配给所有儿童

我希望它能对您有所帮助。
如果我理解正确，您需要制作菜单之类的东西，它总是根据div的长度进行调整

我的想法是设置
元素的宽度
公式为：100除以元素数

但这不是我认为最好的方式

div a{
  display: inline-block;
  text-align: center;
  width: 3.5%;
}

也许这可以帮助你：如果我没弄错的话，你想制作一个菜单之类的东西，它总是适应div的长度

我的想法是设置
元素的宽度
公式为：100除以元素数

但这不是我认为最好的方式

div a{
  display: inline-block;
  text-align: center;
  width: 3.5%;
}

也许这可以帮助你：U
没有理由显示：blockdiv
规则now；）中的code>。我忘了取下。我的坏消息没有理由显示：块div

规则now；）中的code>。我忘了取下。我的巴达：是的，这个解决方案占用了元素之间的所有空间，而不是将其分割。位置很好@罗伯特·耶普：）！啊，是的，这个解决方案使用了元素之间的任何空间，而不是分割它。位置很好@罗伯特·耶普：）！那么，如果我决定删除一个链接项会发生什么呢？那么，如果我决定删除一个链接项会发生什么呢？