CODEWITHSUNDEEP
htmlcss
Omar Gonzales
Omar Gonzales

Reputation: 4008

CSS: align form options

I need to replicate this form:

enter image description here

As you can see in the image, the options in "Select a quantity" part are perfectly aligned.

Not so my much my html:

enter image description here

How can I make it perfectly aligned as in the first image?

I'm using bootstrap 4.

Note: I'm rendering this html from a Django FORM, and as you'll see some values have extra blank spaces.I'm trying to figure out how not to render those values with blank spaces around (how to trim them).

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>

Upvotes: 1

Views: 176

Answers (3)

Rafael Lopes
Rafael Lopes

Reputation: 463

You can try:

ul li {
  text-align: left;
}

Upvotes: 1

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7171

Using Table 

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>

Upvotes: 2

K K
K K

Reputation: 18109

Try this: http://jsfiddle.net/x1hphsvb/10502/

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

Upvotes: 2

Related Questions