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; 
}

希望对您有所帮助!