How to position html elements with css

Asked

Viewed 1,647 times

1

I have difficulty positioning controls, like: I have a Textarea and I would like to put a label next to it, next to the bottom right and below the label, a SELECT control.

Well I have managed, but like this, giving top and left with numerical values, which I do not like much, due to the inconsistencies of the browsers. There is a more practical, more reliable way to position yourself without having to numerically fix the control?

I put an image and this image is slightly below the label, it makes me have an extra space between one and the other. See the full code below.

<form class="form-horizontal" role="form">

      <div class="form-group">
        <label for="lblCnpj" class="col-md-2 control-label">CNPJ:</label>
        <div class="col-md-4">
          <input type="text" class="form-control" id="txtCnpj" placeholder="Digite o Cnpj">
        </div>
          <label for="lblStatus" class="col-md-2 control-label">Status:</label>
          <div class="col-md-4">
              <img src="~/Images/Certo.png" class="col-md-2 control-label"/>
        </div>
      </div>

       <div class="form-group">
        <label for="lblRazao" class="col-md-2 control-label">Razão Social:</label>
        <div class="col-md-6">
          <input type="text" class="form-control" id="txtRazaoSocial" placeholder="Digite a razão social">
        </div>
      </div>

       <div class="form-group">
        <label for="lblIdEvento" class="col-md-2 control-label">ID Evento:</label>
        <div class="col-md-2">
          <input type="text" class="form-control" id="txtIdEvento" placeholder="Digite um evento">
        </div>
      </div>

   </form>
html css

2 answers

2

Use a grids system, such as Twitter Bootstrap. Following is an example of a form using the grids system of the same:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

inserir a descrição da imagem aqui

  • So, but how do I do with CSS in this case?

  • Do I need to install the bootstrap? I went to run this example, and so far ok, now the hard part will be how to position a Textarea and next to it in the bottom right, position more controls.

  • You need to study the Bootstrap grids scheme to know how to use correctly. Lose about 3 days of work and dedicate yourself to it, the subsequent productivity gain will be rewarding.

  • Bootstrap is a CSS library, just use it! They have CDN links on the site

  • I’m starting to wear it. I’m just having a hard time putting one control next to the other and I couldn’t put the label on top and the textbox just below. But I need to read more, three days in four hours, that’s my time.

0

Without using a framework and without numerically fixing the content, it would be interesting to limit your form content within a div, and position them with a certain padding, using floating positioning:

float: left; //left/center/right

Browser other questions tagged html css

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