三列对齐布局实现：中间HR宽度自适应调整需求

我来帮你搞定这个布局需求！你想要实现的是左侧文字带右内边距、中间虚线分隔线自适应填充剩余空间、右侧价格右对齐的效果对吧？咱们直接调整代码来实现：

第一步：优化HTML结构 #

先把冗余的嵌套去掉，让层级更清晰简洁：

<div class="ementaspan">
  <span class="span1">
    <h5 class="font-150690 h5 font-weight-600 text-color-118181-color">Creme de Baunilha</h5>
  </span>
  <hr class="dotted border-accent-color separator-no-padding">
  <span class="span3">
    <h5 class="font-150690 h5 font-weight-300">1,60€</h5>
  </span>
</div>

第二步：用Flex布局实现自适应效果 #

Flex是实现这种「两边固定宽度、中间自适应填充」布局的最佳方案，替换你原来的CSS代码：

.ementaspan {
  display: flex;
  align-items: center; /* 让三个元素垂直居中对齐 */
  gap: 15px; /* 左右元素与分隔线的间距，可按需调整 */
}

.ementaspan .span1 {
  white-space: nowrap; /* 防止左侧文字换行 */
  padding-right: 10px; /* 你需要的右侧内边距 */
}

.ementaspan hr {
  flex: 1; /* 核心属性！让分隔线自动填满剩余空间 */
  border-top: 4px dotted #你的强调色; /* 替换成你实际的border-accent-color对应颜色 */
  margin: 0; /* 清除HR默认的margin，避免多余空隙 */
}

.ementaspan .span3 {
  white-space: nowrap; /* 防止价格换行 */
  text-align: right; /* 价格右对齐 */
  padding-left: 10px; /* 你需要的左侧内边距 */
}

/* 清除原有冲突样式 */
.ementaspan span h5, .ementaspan hr {
  display: block !important;
  margin: 0;
}

方案说明 #

• display: flex 让容器内元素自动横向排列，适配不同宽度的容器
• flex: 1 给中间HR设置了「占据所有剩余可用空间」的规则，不管容器宽度怎么变化，它都会精准衔接左右两个元素
• align-items: center 保证三个元素垂直居中，视觉上更协调
• white-space: nowrap 避免文字或价格因容器变窄而换行，维持布局完整性

你可以根据实际需求调整gap、内边距的数值，以及虚线的颜色和粗细哦～

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