CSS：如何將單選按鈕與圖例對齊？

Question

我有一個表單，但是我的圖例未與單選按鈕對齊。 我怎樣才能做到這一點？

我需要將legen標簽與單選按鈕對齊。 像這個例子：

我有的：

我已經對齊了單選按鈕，但是沒有圖例。我需要將每個圖例的第一個字母與單選按鈕對齊。 就像在圖像示例中一樣。

CSS ：（用於對齊單選按鈕）：

ul, li {
    list-style-type: none;
}


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

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

嘗試將ul中的padding設置為0

ul { padding-left: 0; }