如何将元素直接放在居中元素的右侧？

Question

所以我有一个看起来像这样的元素：

根据设计师的计划，我需要放一点“？” 就在文本的右侧（8.00 美元）。 我使用 flexbox 将元素居中。 基本上，我知道了？ 直接在数字的右侧。 我不希望这个元素将数字推到左边。 那么，8 保持居中，？ 不改变8的position直接向右走。

我做了自己的研究，给出的所有解决方案都是使用绝对定位。 我的意思是，它可以工作，但如果我有更大的数字，？ 可能会超过文本。

你有什么建议吗？

代码，我不知道它是否会工作：

 /* weirdly, display:flex and width:100% have a stroke over them in the console */.compare-row-small-box { display: flex; text-align: center; width: 100%; line-height: 1; padding-top: 1rem; padding-bottom: 1rem; display: flex; flex-direction: column; justify-content: space-between; }.compare-row-box-title { --text-opacity: 1; color: #4a5568; color: rgba(74, 85, 104, var(--text-opacity)); font-size: 12px; }.compare-row-box-content { font-size: 16px; display: flex; flex: 1 1; flex-direction: column; justify-content: flex-start; }

 <div class="space-y-1 compare-row-small-box"> <p class="compare-row-box-title">Frais mensuels estimés</p> <div class="compare-row-box-content"><span>8.00 $</span></div> </div>

Answer 1

使用 CSS 后可以添加内容吗？ 在$之后

 .compare-row-small-box { display: flex; text-align: center; width: 100%; line-height: 1; padding-top: 1rem; padding-bottom: 1rem; display: flex; flex-direction: column; justify-content: space-between; }.compare-row-box-title { --text-opacity: 1; color: #4a5568; color: rgba(74, 85, 104, var(--text-opacity)); font-size: 12px; }.compare-row-box-content { font-size: 16px; display: flex; flex: 1 1; flex-direction: column; justify-content: flex-start; }.compare-row-box-content span { position: relative; }.compare-row-box-content span::after{ content: '?'; position: absolute; }

 <div class="space-y-1 compare-row-small-box"> <p class="compare-row-box-title">Frais mensuels estimés</p> <div class="compare-row-box-content"><span>8.00 $</span></div> </div> <div class="space-y-1 compare-row-small-box"> <p class="compare-row-box-title">Frais mensuels estimés</p> <div class="compare-row-box-content x"><span>1238.00 $</span></div> </div>

Answer 2

放在 '？' 在 an:after 这样的伪元素中。

 /* weirdly, display:flex and width:100% have a stroke over them in the console */.compare-row-small-box { display: flex; text-align: center; width: 100%; line-height: 1; padding-top: 1rem; padding-bottom: 1rem; display: flex; flex-direction: column; justify-content: space-between; }.compare-row-box-title { --text-opacity: 1; color: #4a5568; color: rgba(74, 85, 104, var(--text-opacity)); font-size: 12px; }.compare-row-box-content { font-size: 16px; display: flex; flex: 1 1; flex-direction: column; justify-content: flex-start; }.compare-row-box-content span::after { content: '?'; position: absolute; margin-left: 5px; }

 <div class="space-y-1 compare-row-small-box"> <p class="compare-row-box-title">Frais mensuels estimés</p> <div class="compare-row-box-content"><span>8.00 $</span></div> </div>

Answer 3

使用伪元素来添加你的角色并使用相对定位来给它一些空间。

 /* weirdly, display:flex and width:100% have a stroke over them in the console */.compare-row-small-box { display: flex; text-align: center; width: 100%; line-height: 1; padding-top: 1rem; padding-bottom: 1rem; display: flex; flex-direction: column; justify-content: space-between; }.compare-row-box-title { --text-opacity: 1; color: #4a5568; color: rgba(74, 85, 104, var(--text-opacity)); font-size: 12px; }.compare-row-box-content { font-size: 16px; display: flex; flex: 1 1; flex-direction: column; justify-content: flex-start; }.compare-row-box-content span::after { content: "?"; color: darkorange; font-weight: 700; position: relative; left: 0.5em; opacity: 0.5; transition: opacity 300ms linear; }.compare-row-box-content:hover span::after { opacity: 1; }

 <div class="space-y-1 compare-row-small-box"> <p class="compare-row-box-title">Frais mensuels estimés</p> <div class="compare-row-box-content"><span>8.00 $</span></div> </div> <div class="space-y-1 compare-row-small-box"> <p class="compare-row-box-title">Frais mensuels estimés</p> <div class="compare-row-box-content"><span>800000.00 $</span></div> </div>