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

我需要显示出售物品的原始价格和促销价格。
有些项目可能没有任何价格 - 因此没有被显示在所有
一些项目可能只是表示价格，但没有促销价
项目可以选择性地表明他们的价格的单位

当是一种价格 - 只有在有价格的情况下，我想追加定价货币和价格单位（如果有的话）。这是最好的下方

#spnOldPrice{text-decoration:line-through;} 
 
#spnNewPrice{color:red !important;} 
 
.pricing{position:relative;} 
 
.pricing:not(:empty)::before 
 
{ 
 
position:absolute; 
 
left:100%; 
 
content:attr(data-label); 
 
}

<span id='spnOldPrice'><span id='plainoldPrice' class='pricing'>9.99</span></span> 
 
<span id='spnNewPrice'><span id='plainnewPrice' class='pricing'>4.99</span></span> 
 
<hr> 
 
<span id='spnOldPrice'><span id='oldPrice' class='pricing' data-label='€/box'>9.99</span></span> 
 
<span id='spnNewPrice'><span id='newPrice' class='pricing' data-label='€/box'>4.99</span></span>

看例子明白我有两个例子在这里

第一个简单的表示充分和促销价。这里没有问题。
第二个指示充分，与货币沿着促销价格和价格

的单元后一个例子示出了该问题。额外的€/ box字符串会导致我的条件CSS规则:not(:empty)::before踢在哪些情况下绝对定位的before伪元素显示可见内容。当然，以下范围 - 促销价格 - 并不知道此pseduo元素的任何内容，并根据/盒位自动绘制。

我可以抛开我在这里做过的事情，使用多个嵌套跨度并使用JS的一个点，以确保所有时间都能正常工作。然而，我不得不想一想，在这里必须有一个更优雅的CSS解决方案。我希望这里的某个人能够提出这个解决方案。

来源

2017-10-09 DroidOS

与剥离位置尝试：绝对的;左：100％从.pricing：not（：empty）：在css之前。 –

这只是显示货币/单位的效果，例如€/ box，左边的实际价格根本不是什么意图 – DroidOS

使用position: absolute将建立覆盖文本，由@UIDeveloper
说如果你想显示后的属性的价值元素，只需使用:after：伪。

有关辅助功能的注意事项：（也许您删除了该部分，以便在SO上提供可能的最短代码）两种价格都将读取给盲人阅读器用户。他们不会知道第一个被击中。为了避免这种情况，你可以添加一个跨度将只能通过屏幕阅读器感知（一类像WP，Drupal的，引导等已经找到.visually-hidden/.element-invisible/.sr-only）和解释性文字：Old price

#spnOldPrice{text-decoration:line-through;} #spnNewPrice{color:red !important;} /* .pricing{position:relative;} */ .pricing:not(:empty)::after { /*position:absolute;*/ /*left:100%;*/ content:attr(data-label); }

9.99 4.99 <hr> 9.99 4.99

变异： Flexbox的允许通过附加-reverse从右显示柔性物品到左（和也底部到顶部）：flex-direction: row-reverse（它可以工作，因为伪元素被视为弹性项目）。

#spnOldPrice{text-decoration:line-through;} #spnNewPrice{color:red !important;} .pricing{ display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; /* which is... left-side! */ } .pricing:not(:empty)::after { content:attr(data-label); }

9.99 4.99 <hr> 9.99 4.99

来源

2017-10-09 10:35:03 FelipeAls

我倾向于使用':: before'作为习惯的问题，当我想创建不同寻常的布局时，它会以某种方式附加到另一个元素上，并且通常根据需要将':: before'移动到绝对位置。显然不是必需的。如[她]（https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aafter）所述，after元素将是其父项的**最后一个子项**，并且将默认为无论如何，这就是我所需要的位置。尽管如此，我已经接受并赞成你的回答，因为我非常喜欢你的Flexbox解决方案。 – DroidOS

一个更简单的方法是将保证金添加到第二跨度：

#spnOldPrice{text-decoration:line-through;} 
 
#spnNewPrice{color:red !important;} 
 
.pricing{position:relative;} 
 
.pricing:not(:empty)::before 
 
{ 
 
position:absolute; 
 
left:100%; 
 
content:attr(data-label); 
 
} 
 
#newPrice{margin-left: 40px;}

<span id='spnOldPrice'><span id='plainoldPrice' class='pricing'>9.99</span></span> 
 
<span id='spnNewPrice'><span id='plainnewPrice' class='pricing'>4.99</span></span> 
 
<hr> 
 
<span id='spnOldPrice'><span id='oldPrice' class='pricing' data-label='€/box'>9.99</span></span> 
 
<span id='spnNewPrice'><span id='newPrice' class='pricing' data-label='€/box'>4.79</span></span>

来源

2017-10-09 11:04:18 siderio2

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

回答

相关问题