如何在右侧粘贴 html 标签？ [复制]答案

【问题标题】：how do i stick a html tag on the right side? [duplicate]如何在右侧粘贴 html 标签？ [复制]
【发布时间】：2017-09-29 20:54:37
【问题描述】：

我的目标很简单，将 p 标签粘贴到自定义 css 卡的右侧，使其粘贴到左侧非常简单。

custom-text {
  margin-left: 30px;
}

为了更好的说明这个

问题是我如何让 100 美元始终保持正确？假设美元的价值变成了 5 美元，如何让它总是在右边？

我可以用

custom-text-right {
    margin-left: 450px;
}

但是这个解决方案不能扩展到不同的值（我使用引导程序只是为了您的信息）

HTML 部分：

<h4>Price: <span class="dollar">$3.15</span></h4>

【问题讨论】：

float: right?
请也显示您的 html - 请参阅 minimal reproducible example
为什么这个问题被标记为重复？他/她没有询问 flexbox。
@OlivierKrull — 他们询问左右对齐。重复的问题刚刚意识到flexbox是使用的工具。

标签： html css

【解决方案1】：

你可以使用 flexbox 来做到这一点，justify-content: space-between;

.card {
  display: flex;
  height: 500px;
  width: 500px;
  background: #000;
  justify-content: space-between;
  color: white;
  padding: 30px;
  box-sizing: border-box
}

<div class="card">
  <span>Price:</span>
  <span> $100</span>
</div>

【讨论】：

您的解决方案不灵活，如果有多个价格和美元价值怎么办？我试过了，它在多个跨度上不起作用
它只会将它定位在同一行。
@sinusGob 查看更新的答案
这是你的fiddle
太棒了！非常感谢您花时间提供帮助。上帝保佑你！

【解决方案2】：

您可以使用 float:right 或 text-align:right

【讨论】：

在其他条件相同的情况下，float: right 将导致价格下降到下一行，text-align: right 要么无效，要么将两个内容位都向右对齐。可以同时使用这两种方法来获得所需的效果，但并非没有额外的工作，因此答案并不完整。