如何控制网格布局描述列表中dt与dd的水平间距？

需求与问题 #

我想要创建如下样式的演唱会曲目单：

I: Song 1, Song 2, Song 3, Song 4, Song 5,
Song 6, Song 7

II: Song 10, Song 11, Song 12, ...

E: Song 20

我尝试用Grid布局实现了基本效果，但无法缩小dt与dd之间的水平间距，试过column-gap: 0和给dt设置margin-right: 0都没用。作为HTML/CSS初学者，希望使用Grid、Flex这类现代布局实现响应式效果，也欢迎更优的实现方案建议。

我当前的代码 #

CSS部分

* {
  box-sizing: border-box;
}

body {
  background-color: black;
  background-attachment: fixed;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 90%;
}
.headline-div {
  margin-top: 1em;
  margin-bottom: 1em;
  font-weight: bold;
  font-size: 110%;
  color: red;
}

.setlist-dl {
  display: grid;
  column-gap: 0; /* 尝试缩小间隙但无效 */
  grid-template-columns: max-content auto;
}
.setlist-dt {
  grid-column-start: 1;
  color: yellow;
  /* margin-right: 0; 也试过这个 */
}
.setlist-dd {
  grid-column-start: 2;
  margin-bottom: 10px; /* 给每个组加垂直间距 */
}
.setlist-songs-ul {
  margin: 0;
  padding: 0;
}
.setlist-song-li {
  color: green;
  display: inline; /* 让歌曲横向排列 */
}

/* 调试用的边框 */
div, dt, dd, dl {
  outline-style: dotted;
  outline-color: green;
  outline-width: 1px;
}

HTML部分

<html>
<body>
<div class="headline-div">
  <span id="1981">5/1/81 [Fri] Grateful Dead - Hampton Coliseum, Hampton, VA</span>
</div>
<div>
  <dl class="setlist-dl">
    <!-- SETLIST 1 -->
    <dt class="setlist-dt">
      I:
    </dt>
    <dd class="setlist-dd">
      <ul class="setlist-songs-ul">
        <li class="setlist-song-li">Alabama Getaway&gt;</li>
        <li class="setlist-song-li">Promised Land,</li>
        <li class="setlist-song-li">Friend Of The Devil&gt;</li>
        <li class="setlist-song-li">Me &amp; My Uncle&gt;</li>
        <li class="setlist-song-li">Big River,</li>
        <li class="setlist-song-li">Althea&gt;</li>
        <li class="setlist-song-li">Little Red Rooster,</li>
        <li class="setlist-song-li">Tennessee Jed&gt;</li>
        <li class="setlist-song-li">Let It Grow&gt;</li>
        <li class="setlist-song-li">Deal</li>
      </ul>
    </dd>
    <!-- SETLIST 2 -->
    <dt class="setlist-dt">
      II:
    </dt>
    <dd class="setlist-dd">
      <ul class="setlist-songs-ul">
        <li class="setlist-song-li">Feel Like A Stranger&gt;</li>
        <li class="setlist-song-li">Franklin's Tower&gt;</li>
        <li class="setlist-song-li">Lost Sailor&gt;</li>
        <li class="setlist-song-li">Saint Of Circumstance&gt;</li>
        <li class="setlist-song-li">He's Gone&gt;</li>
        <li class="setlist-song-li">The Other One&gt;</li>
        <li class="setlist-song-li">Drums&gt;</li>
        <li class="setlist-song-li">Space&gt;</li>
        <li class="setlist-song-li">The Wheel&gt;</li>
        <li class="setlist-song-li">Wharf Rat&gt;</li>
        <li class="setlist-song-li">Sugar Magnolia</li>
      </ul>
    </dd>
    <!-- SETLIST 3 -->
    <dt class="setlist-dt">
      E:
    </dt>
    <dd class="setlist-dd">
      <ul class="setlist-songs-ul">
        <li class="setlist-song-li">U.S. Blues</li>
      </ul>
    </dd>
  </dl>
</div>
</body>
</html>

解决方案与优化建议 #

1. 修复Grid布局的间距问题 #

问题根源是浏览器默认给dd元素设置了margin-left，这才是间隙的主要来源，而不是Grid的column-gap。修改CSS如下：

.setlist-dl {
  display: grid;
  grid-template-columns: max-content auto;
  column-gap: 8px; /* 直接控制列间距，按需调整数值 */
}
.setlist-dt {
  grid-column: 1;
  color: yellow;
  padding-right: 4px; /* 可选：微调标签右侧的间距 */
}
.setlist-dd {
  grid-column: 2;
  margin-bottom: 10px;
  margin-left: 0; /* 关键：移除dd默认的左边距 */
}

2. 响应式适配优化 #

添加媒体查询，在小屏幕上让标签和曲目垂直排列，提升移动端体验：

@media (max-width: 480px) {
  .setlist-dl {
    grid-template-columns: 1fr;
  }
  .setlist-dd {
    margin-top: 4px; /* 垂直排列时给标签和曲目加一点间距 */
  }
}

3. 更简洁的Flex布局方案 #

如果觉得Grid的dl结构不够直观，可以改用Flex布局，每个曲目组作为独立的Flex容器：

调整后的HTML

<div class="headline-div">
  <span id="1981">5/1/81 [Fri] Grateful Dead - Hampton Coliseum, Hampton, VA</span>
</div>
<div class="setlist-container">
  <!-- SETLIST 1 -->
  <div class="set-item">
    <span class="set-label">I:</span>
    <ul class="set-songs">
      <li>Alabama Getaway</li>
      <li>Promised Land</li>
      <li>Friend Of The Devil</li>
      <li>Me & My Uncle</li>
      <li>Big River</li>
      <li>Althea</li>
      <li>Little Red Rooster</li>
      <li>Tennessee Jed</li>
      <li>Let It Grow</li>
      <li>Deal</li>
    </ul>
  </div>
  <!-- SETLIST 2 -->
  <div class="set-item">
    <span class="set-label">II:</span>
    <ul class="set-songs">
      <li>Feel Like A Stranger</li>
      <li>Franklin's Tower</li>
      <li>Lost Sailor</li>
      <li>Saint Of Circumstance</li>
      <li>He's Gone</li>
      <li>The Other One</li>
      <li>Drums</li>
      <li>Space</li>
      <li>The Wheel</li>
      <li>Wharf Rat</li>
      <li>Sugar Magnolia</li>
    </ul>
  </div>
  <!-- ENCORE -->
  <div class="set-item">
    <span class="set-label">E:</span>
    <ul class="set-songs">
      <li>U.S. Blues</li>
    </ul>
  </div>
</div>

对应的CSS

.setlist-container {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 控制曲目组之间的垂直间距 */
}
.set-item {
  display: flex;
  align-items: flex-start;
  gap: 8px; /* 控制标签和曲目之间的水平间距 */
}
.set-label {
  color: yellow;
  flex-shrink: 0; /* 防止标签被压缩变形 */
}
.set-songs {
  margin: 0;
  padding: 0;
  flex: 1;
}
.set-songs li {
  color: green;
  display: inline;
  margin-right: 8px; /* 用间距替代硬编码的逗号，更灵活 */
}

/* 移动端适配 */
@media (max-width: 480px) {
  .set-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

4. 细节优化建议 #

• 移除调试用的outline样式，减少视觉干扰
• 歌曲之间用margin-right替代硬编码的逗号，后续调整样式更方便
• 使用gap属性替代margin控制间距，现代布局逻辑更清晰

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