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

Question

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

结果应该是:在 div 的开头，我们有 A，在结尾我们有 Z(或 div 中的最后一个元素)

如您所见，它目前没有拉伸(stretch)。有什么办法吗？

div{
width:100%;
  display: block;
  border: 1px solid #000;
  padding: 10px;
}

div a{
  display: inline-block;
}

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

Answer 1

在您的 div 上结合使用 flexbox (display: flex) 和 justify-content: space-between;。

div{
  width: 100%;
  display: flex;
  border: 1px solid #000;
  padding: 10px;
  justify-content: space-between;
}

div a{
  display: inline-block;
}

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