css - 如何将标签文本与div分开？

Question

我定义了一个标签，其中一半需要位于左侧，另一半文本需要位于右侧。我该如何解决这个问题，以便将另一半拉到右边？

我添加了 margin-right 以使文本向右拉，但与其他 div 不一致。

<div class="radio">
  <input class="radio-test" type="radio" value="3" checked="checked" name="test[id]" id="test_id">
  <label class="radio-label" for="test_id_1">
    Test of $12.0
    <span class="test-cost">Free</span>
  </label>
  <hr class="test-hr">
  <p class="test-message"></p><p>- First test message</p><p></p>
</div>

预期结果:

当前结果:

如何使上图中的文本(即“免费”)出现在最右侧，如预期结果所示？还要使其在其他 div 上始终保持一致，以便 div 之间的空间相同。

Answer 1

这是一个使用 JsBin 的完整工作示例:https://jsbin.com/yafesuyola/1/edit?html,css,output

它使用flexbox和justify-content: space- Between。我还在标签和输入周围添加了一个 div ，以使它们保持在同一行且宽度为 100%。

<div class="radio">
  <div class="radio-and-label">
    <input class="radio-test" type="radio" value="3" checked="checked" name="test[id]" id="test_id">
    <label class="radio-label" for="test_id_1">
      Test of $12.0
      <span class="test-cost">Free</span>
    </label>
  </div>
  <hr class="test-hr">
  <p class="test-message"></p><p>- First test message</p><p></p>
</div>

.radio {
  border: 2px solid #33c;
  border-radius: 5px;
  padding: 10px;
  background: #e0eeff;
  color: #33c;
  font-weight: bold;
}

.radio-and-label {
  display: flex;
}

.radio-label {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.test-cost {
  text-align: right;
}

.test-hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0; 
}

希望有帮助!