如何实现数据与右侧数值间的虚线自动填充对齐？技术咨询

问题说明 #

当前通过硬编码虚线连接数据与右侧数值，输出效果如下：

data1..............          10
data200..............      3000

期望实现虚线自动填充数据与右对齐数值之间的空隙，无需手动硬编码，目标输出：

data1........................10
data200....................3000

现有代码与CSS #

HTML代码 #

<div>
   <a data-target=".lev1"> DisplayData</a>
   <p class ="collapse">data1.............. 
       <span class="RightAlign"> '  10  '</span>
   </p>
   <p class ="collapse">data200..............
       <span class="RightAlign">'  3000  '</span>
   </p>
 </div>

CSS代码 #

.RightAlign {
    float: right;
    margin-right: 20px;
    margin-left: 10px;
  }

解决方案 #

方案一：Flex布局+边框虚线（推荐） #

通过Flex布局让中间容器自动占满剩余空间，用边框实现虚线效果：

修改后的HTML

<div>
   <a data-target=".lev1"> DisplayData</a>
   <p class="collapse">
       <span class="label">data1</span>
       <span class="dashed-gap"></span>
       <span class="RightAlign">10</span>
   </p>
   <p class="collapse">
       <span class="label">data200</span>
       <span class="dashed-gap"></span>
       <span class="RightAlign">3000</span>
   </p>
 </div>

修改后的CSS

.collapse {
    display: flex;
    align-items: center;
    width: 100%; /* 可根据需求调整容器宽度 */
}
.label {
    white-space: nowrap; /* 防止文本换行 */
}
.dashed-gap {
    flex: 1; /* 占满剩余空间 */
    border-bottom: 1px dashed #000;
    margin: 0 8px; /* 控制虚线与两侧文本的间距 */
}
.RightAlign {
    margin-right: 20px;
    white-space: nowrap;
}

方案二：伪元素+绝对定位（适配原有结构） #

无需大幅修改HTML，用伪元素生成虚线并定位到空隙处：

修改后的HTML（移除硬编码虚线）

<div>
   <a data-target=".lev1"> DisplayData</a>
   <p class="collapse">
       <span class="label">data1</span>
       <span class="RightAlign">10</span>
   </p>
   <p class="collapse">
       <span class="label">data200</span>
       <span class="RightAlign">3000</span>
   </p>
 </div>

修改后的CSS

.collapse {
    position: relative;
    padding-right: 80px; /* 给右侧数值预留固定空间 */
}
.label {
    display: inline-block;
}
.collapse::after {
    content: '';
    position: absolute;
    left: calc(100% - 80px);
    right: 20px; /* 和右侧数值的margin-right保持一致 */
    top: 50%;
    transform: translateY(-50%);
    border-bottom: 1px dashed #000;
}
.RightAlign {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}

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