根據以前的內容調整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元素的位置

回答

相關問題