How to organize HTML?

Asked

Viewed 102 times

0

Watch the image;

inserir a descrição da imagem aqui

I need to put the letter "A" here in the middle as it shows the arrow, but I do not know how to do it, I have tried several ways. The code below is my HTML:

  <div class="form-group">
                  <label for="inputEmail3" class="col-sm-2 control-label">Período:</label>
                  <div class="row">
                      <div class="col-sm-2">
                       <input autocomplete="off" id="idPeriodoInicio" class="form-control monthPicker listar_uj" name="periodoInicio" id="periodoInicio"  placeholder="Período Inicial"> 
                      </div>
                       <div class="col-sm-2">
                        <input autocomplete="off"  id="idPeriodoFim" class="form-control monthPicker listar_uj" name="periodoFim" id="periodoFim" placeholder="Período Final">
                      </div> 
                  </div>
                </div>
  • Instead of using Row’s and col’s, try using the form-inline class in the components.

  • how can I do this?

  • I’ll answer as a question.

1 answer

2


  <div class="form-inline">
   <label for="inputEmail3" class="control-label">Período:</label>
     <input autocomplete="off" id="idPeriodoInicio" class="form-control monthPicker listar_uj" name="periodoInicio" id="periodoInicio"  placeholder="Período Inicial"> 
     <input autocomplete="off"  id="idPeriodoFim" class="form-control monthPicker listar_uj" name="periodoFim" id="periodoFim" placeholder="Período Final">
  </div>

Now fit your need with the css styles.

  • it is worth including the css behind the "form-inline" class, you are assuming that OP is using bootstrap. In addition to being able to confuse other more lay people.

  • I understood that he used bootstrap by the other implemented classes (form-control, control-label, form-group, Row and col’s), so I gave the tip using bootstrap.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.