移动端有序列表响应式布局及短横线隐藏方法咨询

核心思路：把短横线单独封装成独立元素，通过媒体查询在移动端隐藏 #

不用纠结content属性，直接通过元素显隐控制更简单，适合非专业开发者操作，步骤如下：

1. 调整HTML结构，单独拆分短横线
   把短横线放到带类名的<span>里，方便后续精准控制：

<ol>
  <li>
    <span class="num-name">1 张三</span>
    <span class="dash">-</span>
    <span class="title">产品迭代方案说明</span>
    <span class="other-data">(更新时间：2024-06-10)</span>
  </li>
  <li>
    <span class="num-name">2 李四</span>
    <span class="dash">-</span>
    <span class="title">用户反馈汇总报告</span>
    <span class="other-data">(反馈量：128条)</span>
  </li>
</ol>

2. 基础CSS布局，实现换行效果
   用Flex布局控制元素换行，让标题、其他数据单独占一行：

/* 列表项基础布局 */
li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px; /* 列表项间留间距 */
}

/* 强制标题、其他数据单独换行 */
.title, .other-data {
  width: 100%;
  margin-left: calc(2.2em + 8px); /* 对齐序号姓名的缩进，数值可按需调整 */
}

/* 短横线的基础样式 */
.dash {
  margin: 0 8px; /* 短横线和前后内容留间距 */
}

3. 移动端媒体查询，隐藏短横线
   设置屏幕宽度阈值（比如768px，可自行调整），在移动端隐藏短横线：

/* 移动端响应式规则 */
@media (max-width: 768px) {
  .dash {
    display: none;
  }
}

额外说明 #

• 如果序号是有序列表自带的（不是手动输入的数字），可以把<span class="num-name">改成只包含姓名，再通过CSS调整序号样式，同样能实现序号+姓名同行的效果。
• 缩进的calc(2.2em + 8px)数值可根据序号和姓名的实际宽度微调，保证标题、其他数据和序号姓名对齐。

内容的提问来源于stack exchange，提问作者Life after Guest