根据先前的内容调整HTML span元素的位置

这就是我试图解决的问题

• 我需要展示一件商品的原价和促销价
• 有些项目可能没有任何定价-因此根本没有显示任何内容
• 有些商品可能只是标明价格，但没有促销价格
• 项目可以选择显示其价格单位

当有价格时——并且只有当有价格时，我才想附加定价货币和价格单位（如果可用）。通过下面的示例可以更好地理解这一点

#spnOldPrice{文本装饰：行通过；}
#spnNewPrice{颜色：红色！重要；}
.定价{位置：相对；}
.定价：不（：空）：：之前
{
位置：绝对位置；
左：100%；
内容：attr（数据标签）；
}

9.99
4.99

9.99
4.99

使用

位置：绝对

将创建被覆盖的文本，如@UIDeveloper所述
如果要在元素后面显示属性的值，只需使用

:after

:pseudo

关于可访问性的注意事项：（可能您删除了该部分以获得最短的问题代码）这两种价格都将向盲屏阅读器用户读取。他们不会知道第一个被击中了。为了避免这种情况，您可以添加一个只有屏幕阅读器才能看到的范围（使用类似于

.visually hidden

/

.element invisible

/

.sr only

的类）和一个解释性文本：

旧价格

#spnOldPrice{文本装饰：行通过；}
#spnNewPrice{颜色：红色！重要；}
/*.定价{位置：相对；}*/
.定价：不（：空）：：之后
{
/*位置：绝对位置*/
/*左：100%*/
内容：attr（数据标签）；
}

9.99
4.99

9.99
4.99

使用

位置：绝对

将创建被覆盖的文本，如@UIDeveloper所述
如果要在元素后面显示属性的值，只需使用

:after

:pseudo

关于可访问性的注意事项：（可能您删除了该部分以获得最短的问题代码）这两种价格都将向盲屏阅读器用户读取。他们不会知道第一个被击中了。为了避免这种情况，您可以添加一个只有屏幕阅读器才能看到的范围（使用类似于

.visually hidden

/

.element invisible

/

.sr only

的类）和一个解释性文本：

旧价格

#spnOldPrice{文本装饰：行通过；}
#spnNewPrice{颜色：红色！重要；}
/*.定价{位置：相对；}*/
.定价：不（：空）：：之后
{
/*位置：绝对位置*/
/*左：100%*/
内容：attr（数据标签）；
}

9.99
4.99

9.99
4.99

一种简单得多的方法是在第二个跨距上添加边距：

#spnOldPrice{文本装饰：行通过；}
#spnNewPrice{颜色：红色！重要；}
.定价{位置：相对；}
.定价：不（：空）：：之前
{
位置：绝对位置；
左：100%；
内容：attr（数据标签）；
}
#newPrice{左边距：40px；}

9.99
4.99

9.99
4.79

一个更简单的方法是在第二个跨距上添加一个边距：

#spnOldPrice{文本装饰：行通过；}
#spnNewPrice{颜色：红色！重要；}
.定价{位置：相对；}
.定价：不（：空）：：之前
{
位置：绝对位置；
左：100%；
内容：attr（数据标签）；
}
#newPrice{左边距：40px；}

9.99
4.99

9.99
4.79

尝试移除位置：绝对位置；左：100%来自。定价：不（：空）：在css之前。这只是在实际价格的左侧显示货币/单位，例如欧元/箱，这根本不是预期的。删除位置：绝对；左：100%来自。定价：不（：空）：在css之前。这只是具有显示货币/单位的效果，例如欧元/箱，在实际价格的左边，这根本不是我想要的，我倾向于使用

：：before

作为一种习惯，当我想创建不寻常的布局，以某种方式连接到另一个元素，并且通常通过绝对定位来移动

：：before

。显然不需要。因为after元素将是其父元素的最后一个子元素，并且默认情况下将被定位到右边，这就是我在这里需要的。尽管如此，我还是接受并支持了您的答案，因为我非常喜欢您的flexbox解决方案。当我想创建不寻常的布局，以某种方式连接到另一个元素，并且通常通过绝对定位来移动

：：before

时，我习惯使用

：before

。显然不需要。因为after元素将是其父元素的最后一个子元素，并且默认情况下将被定位到右边，这就是我在这里需要的。尽管如此，我还是接受了您的答案并对其进行了投票，因为我非常喜欢您的flexbox解决方案。