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