html - 如何在 div 中将 3 列向左对齐？

Question

我有一个包含 3 列的 div，这些是 span 标签:

$('#id_size_0').attr('checked', true);

$(".quantity_50").html("S/.50");
$(".savings_50").html("          ");
$(".quantity_100").html("S/.70");
$(".savings_100").html("Ahorra 30%");
$(".quantity_200").html("S/.90");
$(".savings_200").html("Ahorra 55%");
$(".quantity_300").html("S/.108");
$(".savings_300").html("Ahorra 64%");
$(".quantity_500").html("S/.140");
$(".savings_500").html("Ahorra 78%");

$('input:radio[name="size"]').change(function() {
  if ($(this).val() == '5cm x 5cm') {
    $(".quantity_50").html("S/.50");
    $(".savings_50").html("          ");
    $(".quantity_100").html("S/.70");
    $(".savings_100").html("Ahorra 30%");
    $(".quantity_200").html("S/.90");
    $(".savings_200").html("Ahorra 55%");
    $(".quantity_300").html("S/.108");
    $(".savings_300").html("Ahorra 64%");
    $(".quantity_500").html("S/.140");
    $(".savings_500").html("Ahorra 78%");
  } else if ($(this).val() == '7cm x 7cm') {
    $(".quantity_50").html("S/.70");
    $(".savings_50").html("     ");
    $(".quantity_100").html("S/.90");
    $(".savings_100").html("Ahorra 36%");
    $(".quantity_200").html("S/.130");
    $(".savings_200").html("Ahorra 54%");
    $(".quantity_300").html("S/.160");
    $(".savings_300").html("Ahorra 69%");
    $(".quantity_500").html("S/.240");
    $(".savings_500").html("Ahorra 66%");
  } else if ($(this).val() == '10cm x 10cm') {
    $(".quantity_50").html("S/.90");
    $(".savings_50").html("     ");
    $(".quantity_100").html("S/.115");
    $(".savings_100").html("Ahorra 36%");
    $(".quantity_200").html("S/.180");
    $(".savings_200").html("Ahorra 50%");
    $(".quantity_300").html("S/.280");
    $(".savings_300").html("Ahorra 48%");
    $(".quantity_500").html("S/.450");
    $(".savings_500").html("Ahorra 50%");
  } else if ($(this).val() == '13cm x 13cm') {
    $(".quantity_50").html("S/.200");
    $(".savings_50").html("     ");
    $(".quantity_100").html("S/.370");
    $(".savings_100").html("Ahorra 10%");
    $(".quantity_200").html("S/.430");
    $(".savings_200").html("Ahorra 46%");
    $(".quantity_300").html("S/.500");
    $(".savings_300").html("Ahorra 58%");
    $(".quantity_500").html("S/.900");
    $(".savings_500").html("Ahorra 55%");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="semi-transparent padded rounded">
  <div class="bg-white rounded padded padded-40">
    <form method="post">
      <input type="hidden" name="csrfmiddlewaretoken" value="PjG1UJe5x6E2lb53BEbvWJ6tcKJcWfI15LWoB4bp57KMhoAGTDFyKuTtSkcILXpV">
      <div class="">
        <div id="size">
          <legend class="text-size16 bold-font"> Selecciona un tamaño</legend>
          <ul class="form-items">
            <li>
              <span><input type="radio" name="size" value="5cm x 5cm" id="id_size_0" required> 5 cm x 5 cm</span>
            </li>
            <li>
              <span><input type="radio" name="size" value="7cm x 7cm" id="id_size_1" required>  7 cm x 7 cm</span>
            </li>
            <li>
              <span><input type="radio" name="size" value="10cm x 10cm" id="id_size_2" required> 10 cm x 10 cm</span>
            </li>
            <li>
              <span><input type="radio" name="size" value="13cm x 13cm" id="id_size_3" required> 13 cm x 13 cm</span>
            </li>
          </ul>
        </div>

        <div id="quantity">
          <legend class="text-size16 bold-font"> Selecciona la cantidad</legend>
          <ul class="form-items">
            <li>
              <span><input type="radio" name="quantity" value="50" id="id_quantity_0" required> 50</span>
              <span class="quantity_50"></span>
              <span class="savings_50"></span>
            </li>
            <li>
              <span><input type="radio" name="quantity" value="100" id="id_quantity_1" required> 100</span>
              <span class="quantity_100"></span>
              <span class="savings_100"></span>
            </li>
            <li>
              <span><input type="radio" name="quantity" value="200" id="id_quantity_2" required> 200</span>
              <span class="quantity_200"></span>
              <span class="savings_200"></span>
            </li>
            <li>
              <span><input type="radio" name="quantity" value="300" id="id_quantity_3" required> 300</span>
              <span class="quantity_300"></span>
              <span class="savings_300"></span>
            </li>
            <li>
              <span><input type="radio" name="quantity" value="500" id="id_quantity_4" required> 500</span>
              <span class="quantity_500"></span>
              <span class="savings_500"></span>
            </li>
          </ul>
        </div>
      </div>

      <button type="submit" class="btn btn-naranja text-white btn-block">Continuar</button>

      <br><br>

      <p class="text-size10 text-center">Siguiente: subir imagen</p>
    </form>
  </div>
</div>

( codepen )

第一列是单选按钮及其标签，第二列是成本，第三列是节省。

除了使用此代码将单选按钮向左对齐外，我没有使用其他带有 CSS 的东西，是这个页面:

form ul {
    padding-left: 0;
}

form ul li {
    display: flex;
    justify-content: space-between;
    width: 200px;
    text-align: left;
}

我曾尝试使用空格 ( ) 来对齐元素，但不可能正确地做到这一点。

Answer 1

这是一个带有 CSS 网格的片段:

#quantity .form-items li {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
}

检查对 https://caniuse.com/#feat=css-grid 的支持并在必要时填充您正在构建的东西/您的用户需要的东西。

或者如果无法使用网格，您可以使用 display:table 实现类似的效果

#quantity .form-items li {
   display: table;
   width: 100%;
}
#quantity .form-items li span {
   display:table-cell;
   width: 33.33%;
}