如何创建移动端转为列表的响应式艺术家表格并修复间隙问题

问题概述 #

需要实现一个展示艺术家名字的响应式表格：桌面端每行名字间用✧符号分隔；当前代码在移动端视图下，本该隐藏的间隙元素仍占用空间，导致名字列表出现多余间隙，同时代码结构冗余，需要优化。

优化方案 #

1. 移动端冗余元素彻底隐藏：在媒体查询中对分隔类元素添加display: none，完全消除空间占用
2. 简化结构逻辑：移除原有的空单元格+间隙的冗余结构，改用独立的分隔行容器，通过Flex布局实现桌面端的✧分隔效果
3. 清理冗余样式：移除不必要的边框样式，简化单元格布局规则

修改后的完整代码 #

HTML #

<div class="artist-table">
  <!-- 第一行艺术家 -->
  <div class="artist-row">
    <div class="artist-item">APBWAS</div>
    <div class="artist-item">Daan Mol</div>
    <div class="artist-item">Edith Underground</div>
  </div>

  <!-- 分隔线 -->
  <div class="divider-row">
    <span class="divider">✧</span>
    <span class="divider">✧</span>
  </div>

  <!-- 第二行艺术家 -->
  <div class="artist-row">
    <div class="artist-item">Eyeshadows</div>
    <div class="artist-item">HeveN</div>
    <div class="artist-item">How To Dress Well</div>
  </div>

  <!-- 分隔线 -->
  <div class="divider-row">
    <span class="divider">✧</span>
    <span class="divider">✧</span>
  </div>

  <!-- 第三行艺术家 -->
  <div class="artist-row">
    <div class="artist-item">Makeup</div>
    <div class="artist-item">Mascara</div>
    <div class="artist-item">Mater Suspiria Vision</div>
  </div>
</div>

CSS #

/* 页面基础样式 */
html {
  height: 100%;
  background-color: #EEE;
}

body {
  box-sizing: border-box;
  min-height: 100%;
  margin: 0 auto;
  padding: 2em;
  max-width: 800px;
  font-size: 1.2em;
  background-color: white;
  text-align: center;
}

/* 艺术家表格容器 */
.artist-table {
  margin: 0 0 3em 0;
}

/* 艺术家行布局 */
.artist-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

/* 艺术家项样式 */
.artist-item {
  width: 30%;
  padding: 4px;
}

/* 分隔行样式 */
.divider-row {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
}

.divider {
  width: 5%;
}

/* 响应式适配 */
@media all and (max-width: 500px) {
  /* 移动端改为块级布局，每项占满宽度 */
  .artist-row {
    display: block;
  }

  .artist-item {
    width: 100%;
    margin: 8px 0;
  }

  /* 移动端隐藏分隔行 */
  .divider-row {
    display: none;
  }
}

改动说明 #

• 重构HTML结构：用artist-row包裹每行艺术家，divider-row专门处理分隔，结构清晰易维护
• 移动端彻底消除冗余空间：通过display: none移除分隔行，避免无效占位
• 简化Flex布局逻辑：用justify-content: space-between自动分配间距，无需手动设置间隙单元格
• 移除不必要的边框样式：符合最终版本无框的需求

内容的提问来源于stack exchange，提问作者Alan V K