如何通过CSS Grid实现文本列自适应最长文本宽度并对齐链接

嘿，我来帮你搞定这个链接对齐的问题！你现在的代码里每个.row都是独立的Grid容器，导致每一行的文本列只适配自己的宽度，所以没法让所有链接对齐。要实现你想要的效果，关键是让所有文本共享同一个Grid列，这样这个列会自动适配最长的文本内容，所有链接自然就对齐了。

给你调整后的代码，完全用CSS Grid实现动态宽度适配：

CSS 代码 #

.parentDiv {
  display: grid;
  /* 第一列自适应最长文本宽度，第二列占剩余所有空间 */
  grid-template-columns: auto 1fr;
  gap: 8px; /* 可选：给文本和链接之间加一点可控的空白，可按需调整 */
  align-items: center; /* 让每行内容垂直居中，视觉更协调 */
}

.parentDiv .row {
  display: contents; /* 让row的子元素直接成为parentDiv的Grid项，统一列宽 */
}

.row p {
  margin: 0; /* 去掉p标签默认的上下外边距，避免行高不一致 */
  text-align: left;
}

.row a {
  text-align: left;
}

HTML 代码 #

<div class="parentDiv">
  <div class="row">
    <p>Title @</p>
    <a href="https://example.com/">Link</a>
  </div>
  <div class="row">
    <p>Longer Title @</p>
    <a href="https://example.com/">Link</a>
  </div>
  <div class="row">
    <p>Longest Title @</p>
    <a href="https://example.com/">Link</a>
  </div>
  <div class="row">
    <p>Title @</p>
    <a href="https://example.com/">Link</a>
  </div>
</div>

关键原理说明 #

1. 统一Grid容器：把.parentDiv作为唯一的Grid容器，用grid-template-columns: auto 1fr定义两列——auto会自动拉伸第一列的宽度以容纳最长的文本内容，1fr让第二列占据剩余的所有空间，这样所有链接就会在同一垂直线上对齐。
2. display: contents的妙用：给.row设置这个属性后，.row元素本身会从布局结构中“隐身”，它的子元素（<p>和<a>）会直接成为.parentDiv的Grid子项，这样所有文本都归到第一列，所有链接归到第二列，实现了统一的列宽控制。
3. 细节优化：去掉<p>标签的默认外边距，避免行与行之间的间距混乱；gap属性可以让文本和@后面的链接之间的空白更可控，你也可以根据需求调整这个值或者直接去掉它。

这样调整后，就完全符合你的需求了：不需要设置固定像素宽度，文本列自适应最长内容，所有链接自动对齐，短文本的@和链接之间会自动填充空白。

内容的提问来源于stack exchange，提问作者cdt