CSS: question about aligning and lists

Question

Hi,

i have this page.

Press "Registrate".

Is there any way to align vertically each field with the error message without giving a left margin?

Regards

Javi

Answer 1

You will need to move your error message elements into their corresponding <li class="form_1"> elements. Then, assign float: left; to each error message element.

Answer 2

Putting everything into list-items will be tricky. You could change this:

<li class="form_1_errores">
  <ul class="error_list">
    <li>Debes escribir tu e-mail</li>
  </ul>
</li>
<li class="form_1">
  <label for="register_password">Contrase&#241;a</label>
</li>
<li class="form_1">
  <input type="password" name="register[password]"
  id="register_password"></input>
</li>

To This:

<li class="form_1">
  <label for="register_password">Contrase&#241;a</label>
  <input type="password" name="register[password]"
  id="register_password"></input>
  <ul class="error_list">
    <li>Debes escribir tu e-mail</li>
  </ul>
</li>

.form_1 label, .form_1 input, .form_1 ul{
    float: left;
}

Answer 3

Instead of assign a margin-left to each individual item, give the margin to the containing block. #formulario_registro seems like the best candidate.

Also as I suggested in your other post: There is nothing wrong with layouting forms like this with a table.