html - 在不使用表格的情况下对齐不同宽度链接的大行

Question

我有一长串链接。只要链接的所有显示文本宽度相同(大部分是)，它们就会按列显示并在调整屏幕大小时重新排序。当列表中存在宽度不同的链接时，排列整齐的列会受到干扰。

所有相同的宽度:

Chapter 01   Chapter 02   Chapter 03
Chapter 04   Chapter 05   Chapter 06
Chapter 07 ... etc.

浏览器窗口变小::

Chapter 01   Chapter 02
Chapter 03   Chapter 04
Chapter 05   Chapter 06
Chapter 07 ... etc.

(为了避免在“章节”和数字之间换行，它们之间有一个 nbsp。)

如果更改浏览器宽度，列表会按或多或少的列重新排序，但会保持完美对齐，这正是我想要的。例如，当列表中出现“Prologue”或“Interlude”时，问题就开始了。 “序言”的宽度与每个“第 XX 章”的宽度不同，它杀死了很好对齐的列:

Prologue   Chapter 01   Chapter 02
Chapter 03   Chapter 04   Chapter 05
Chapter 06   Interlude   Chapter 07
Chapter 08   Chapter 09   Chapter 010

这不能用表来解决，因为这需要固定数量的列，而列不会换行以保持链接的顺序不变。 bootstrap 列也是如此。对于那些，当屏幕宽度减小时，一行中的最后一个链接不会换行为新行中的第一个链接。

它可以使用等宽字体来解决，并使每个显示的章节具有相同数量的字符，但我真的很想保留用于页面其余部分的基本字体。等宽字体看起来不太好。我尝试用 nbsp 填写较短的宽度链接，但这并没有像它应该的那样解决问题。如果有足够的空间，它会很接近，但对齐的一点点差异会更糟。我尝试了一些建议，其中链接都被强制设置为相同的宽度，但我还没有找到 100% 正确的建议。我还尝试将“Prologue”放在单独的一行中，但是有太多的可能性使它成为一个可行的解决方案。 (在章节之前、之后和中间有许多不同的名字。)

<!-- Nicely aligned -->
<div class="index-list">
    <a href="chapter001.html">Chapter&nbsp;01</a>
    <a href="chapter002.html">Chapter&nbsp;02</a>
    <a href="chapter003.html">Chapter&nbsp;03</a>
    <a href="chapter004.html">Chapter&nbsp;04</a>
    <a href="chapter005.html">Chapter&nbsp;05</a>
    <a href="chapter006.html">Chapter&nbsp;06</a>
    <a href="chapter007.html">Chapter&nbsp;07</a>
</div>

<!-- Not nicely aligned -->
<div class="index-list">
    <a href="prologue.html">Prologue</a>
    <a href="chapter001.html">Chapter&nbsp;01</a>
    <a href="chapter002.html">Chapter&nbsp;02</a>
    <a href="chapter003.html">Chapter&nbsp;03</a>
    <a href="chapter004.html">Chapter&nbsp;04</a>
    <a href="chapter005.html">Chapter&nbsp;05</a>
    <a href="chapter006.html">Chapter&nbsp;06</a>
    <a href="chapter007.html">Chapter&nbsp;07</a>
</div>

有没有办法在不使用等宽字体、表格、 Bootstrap 列的情况下使链接在列中对齐？强制链接具有相同宽度的正确方法是可以的，但它必须是可扩展的，因为用户可以更改字体大小。允许“第 1 章”而不是“第 01 章”并保持对齐的解决方案将是完美的。

Answer 1

CSS-Grid 可能是您的最佳选择。

.index-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))
}

a {
  border: 1px solid red;
}

<div class="index-list">
  <a href="prologue.html">Prologue</a>
  <a href="chapter001.html">Chapter&nbsp;01</a>
  <a href="chapter002.html">Chapter&nbsp;02</a>
  <a href="chapter003.html">Chapter&nbsp;03</a>
  <a href="chapter004.html">Chapter&nbsp;04</a>
  <a href="chapter005.html">Chapter&nbsp;05</a>
  <a href="chapter006.html">Chapter&nbsp;06</a>
  <a href="chapter007.html">Chapter&nbsp;07</a>
</div>