CSS：对齐表单选项

Question

我需要复制此表格：

如您在图像中所见，“选择数量”部分中的选项完全对齐。

不是我的html

如何使它与第一张图片完全对齐？

我正在使用引导程序4。

注意：我正在从Django FORM渲染此html，并且您将看到一些值具有额外的空格。我试图弄清楚如何不使用空格来渲染这些值（如何修剪他们）。

HTML：

<form action="/post_url_tamanioscantidades/" method="post">
  <input type="hidden" name="csrfmiddlewaretoken" value="Phabzw1RqbPnGf2wKo4zoHqWLXogOcfbFR38uxXLeoHeBigRBXhXqO0q9mhFimsB">

<div id="tamanios">
   <legend> Selecciona un tamaño</legend>
      <ul>
        <li>
           <span>
              <input type="radio" name="tamanios" value="2x2" id="id_tamanios_0" required>
                                                    2&quot; x 2&quot; </span>
        </li>
        <li>
          <span>
            <input type="radio" name="tamanios" value="3x3" id="id_tamanios_1" required>
                                                    3&quot; x 3&quot;
         </span>
        </li>
         <li>
           <span>
             <input type="radio" name="tamanios" value="4x4" id="id_tamanios_2" required>
                                                    4&quot; x 4&quot;
           </span>
         </li>
         <li>
           <span>
             <input type="radio" name="tamanios" value="5x5" id="id_tamanios_3" required>
                                                    5&quot; x 5&quot;
           </span>
       </li>
   </ul>

 </div>


 <div id="cantidades">

    <legend> Selecciona la cantidad</legend>

         <ul>
             <li>
              <span>
                <input type="radio" name="cantidades" value="100" id="id_cantidades_0" required>
                                                50
               </span>                                                   <span>$69</span>
               <span class="savings">Ahorra 39%</span>
          </li>
          <li>
             <span>
                <input type="radio" name="cantidades" value="100" id="id_cantidades_1" required>
                                                100 </span>
                                                <span>$120</span>
<span class="savings">Ahorra 77%</span>
          </li>
          <li>
          <span>
            <input type="radio" name="cantidades" value="150" id="id_cantidades_2" required>
                                                    150
            </span>
                                                    <span>$509</span>
           <span class="savings">Ahorra 60%</span
         </li>
       </ul>

    </div>

  <input type="submit" value="Submit"/>
</form>

Answer 1

尝试一下：http://jsfiddle.net/x1hphsvb/10502/

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

Answer 2

使用表格

table tr td {
  padding-left: 10px;
}

<form action="/post_url_tamanioscantidades/" method="post">
  <input type="hidden" name="csrfmiddlewaretoken" value="Phabzw1RqbPnGf2wKo4zoHqWLXogOcfbFR38uxXLeoHeBigRBXhXqO0q9mhFimsB">

  <div id="tamanios">
    <legend> Selecciona un tamaño</legend>
    <table>
      <tr>
        <td>
          <input type="radio" name="tamanios" value="2x2" id="id_tamanios_0" required> 2&quot; x 2&quot; </td>
      </tr>
      <tr>
        <td>
          <input type="radio" name="tamanios" value="3x3" id="id_tamanios_1" required> 3&quot; x 3&quot;
        </td>
      </tr>
      <tr>
        <td>
          <input type="radio" name="tamanios" value="4x4" id="id_tamanios_2" required> 4&quot; x 4&quot;
        </td>
      </tr>
      <tr>
        <td>
          <input type="radio" name="tamanios" value="5x5" id="id_tamanios_3" required> 5&quot; x 5&quot;
        </td>
      </tr>
    </table>

  </div>


  <div id="cantidades">

    <legend> Selecciona la cantidad</legend>

    <table>
      <tr>
        <td>
          <input type="radio" name="cantidades" value="100" id="id_cantidades_0" required> 50
        </td>
        <td>$69</td>
        <td class="savings">Ahorra 39%</td>
      </tr>
      <tr>
        <td>
          <input type="radio" name="cantidades" value="100" id="id_cantidades_1" required> 100 </td>
        <td>$120</td>
        <td class="savings">Ahorra 77%</td>
      </tr>
      <tr>
        <td>
          <input type="radio" name="cantidades" value="150" id="id_cantidades_2" required> 150
        </td>
        <td>$509</td>
        <td class="savings">Ahorra 60%</td>
      </tr>
    </table>

  </div>

  <input type="submit" value="Submit" />
</form>

Answer 3

您可以尝试：

ul li {
  text-align: left;
}