Vue.js中使用flex布局实现价格与原价标签同行及调整间距的方法

问题原因 #

导致两个元素换行的核心问题有两个：

1. .price-section设置了固定宽度width: 48px，宽度不足以同时容纳「Rs.1500」和后面的label标签
2. 开启了flex-wrap: wrap属性，内容超出容器宽度时会自动换行

修正方案 #

直接替换你的<style>部分对应代码即可：

<style scoped>
.price-section{
  text-align: left;
  font: normal normal bold 12px/16px Roboto;
  letter-spacing: 0px;
  color: #0A0102;
  opacity: 1;
  margin-left:20px;
  margin-top:26px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* 按需调整两个价格的间距 */
  gap: 8px;
}
label{
  text-decoration-line: line-through;
  font: normal normal normal 10px/13px Roboto;
  letter-spacing: 0px;
  color: #878787;
  opacity: 1;
}
</style>

核心修改说明 #

• 移除了.price-section的固定宽高限制，让容器宽度自适应内容
• 关闭flex自动换行，强制子元素在同一行展示
• 新增align-items: center让不同字号的两个价格垂直居中对齐，避免错位
• 通过调整gap的数值即可自由控制两个价格之间的间距，需要更大间距直接修改数值即可

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