How to align form input with labels?

Question

How to align form input with labels?

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

1

How could I do to align the labels of a form with their respective inputs? I would like the label and the input to be on the same line. Something like this:

At the moment I have this:

 <div class="form-group">
              <label>Nombre *</label>
              <input type="text" placeholder="Introduce tu nombre..." required class="form-control" name="nombre">
            </div>
            <div class="form-group">
              <labe>Apellidos *</label>
              <input type="text" placeholder="Introduce tus apellidos..." required class="form-control" name="apellidos">
            </div>
            <div class="form-group">
              <label>Email *</label>
              <input type="mail" placeholder="Introduce tu email..." required class="form-control" name="email">
            </div>
            <div class="form-group">
              <label>Dirección *</label>
              <input type="text" placeholder="Introduce tu dirección..." required class="form-control" name="direccion">
            </div>

css

asked by blee1d 31.01.2018 в 19:11

source

3 answers

1

You could also do the following:

form input, form textarea{
display: block;    
}

What this code does is that all the input and the label accommodate them and you download them. What I mean is that it gives you a better order, that's what you get:

Label1  
(Tu textbox)  
Label2  
(Tu textbox)

and the textbox will be aligned

answered by 20.09.2018 в 20:45

0

You can include the label and input within divs and assign them a certain width:

 <div style="width: 30%">
          <label>Nombre *</label>
 </div>
 <div style="width: 70%">
          <input type="text" placeholder="Introduce tu nombre..." required 
          class="form-control" name="nombre">
 </div>

answered by 31.01.2018 в 19:22

Operator overload! with class Visibility c # Error compiling a template

score 2 · Accepted Answer

What you could do would be to use the display: inline-block property on the label so that they could take a width and assign them a fixed width.

In this way, all inputs would start on the same site.

Your modified example:

label{
  display: inline-block;
  width: 80px;
}

<div class="form-group">
    <label>Nombre *</label>
    <input type="text" placeholder="Introduce tu nombre..." required class="form-control" name="nombre">
</div>
<div class="form-group">
    <label>Apellidos *</label>
    <input type="text" placeholder="Introduce tus apellidos..." required class="form-control" name="apellidos">
</div>
<div class="form-group">
    <label>Email *</label>
    <input type="mail" placeholder="Introduce tu email..." required class="form-control" name="email">
</div>
<div class="form-group">
    <label>Dirección *</label>
    <input type="text" placeholder="Introduce tu dirección..." required class="form-control" name="direccion">
</div>