Align fields side by side in a form

Question

Align fields side by side in a form

Navigation

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

2

I'm having trouble aligning 2 fields side by side on a form, the first case would be a select next to one input and the other two inputs.

Ex:

HTML:

<li><label>Selecionealgo</label><select><optiondisabled>SelecioneAlgo</option></select><label>Escrevaalgo</label><inputtype="text"/>
</li>

<li>
    <input type="text"/>
    <div id="checkbox">
        <label> Marque algo
            <input type="checkbox"/> Marcado
        </label>
    </div>
</li>

html css

asked by anonymous 19.06.2016 / 16:22

3 answers

Calculate square root in C # Create textboxes at runtime

score 2 · Answer 1

Well, if that's what I mean, if you want to align the text with the check box, you can not close the text tag and then put the checkbox, you have to put the checkbox inside the text tag, and then close ... so they are aligned. Try this:

<li>
<label>Selecione algo</label>
<select>
<option disabled>Selecione Algo</option>


<label>Escreva algo</label>
<input type="text"/></select>
</li>

<li>
<label>Escreva algo</label>
<input type="text"
<div id="checkbox">
<label> Marque algo
<input type="checkbox"/></input>
</label>
</div>
</li>

Then just do the rest with CSS, if that's what you want, there's not much secret.

score 2 · Answer 2

HTML

<form class="form">
  <div class="section">
    <div class="control-group">
      <label class="control-label">Selecione algo</label>
      <select class="control">
            <option disabled>Selecione Algo</option>
      </select>
    </div>

    <div class="control-group">
      <label class="control-label">Escreva algo</label>
      <input type="text" class="control"/>
    </div>

  </div>

  <div class="section">
    <div class="control-group">
      <label class="control-label">Escreva algo</label>
      <input type="text" class="control"/>
    </div>

    <div class="control-group">
      <label class="control-label">Marque algo</label>
      <label>
        <input type="checkbox"/>
        Concordo (checkbox)
      </label>
    </div>

  </div>
</form>

CSS

.form {
  display: flex;
  width: 550px;
  background-color: black;
  color: #CCC;
}

.form .section {
  flex-grow: 1;
  flex-direction: column;
  padding: 30px;
}

.form .section .control-group {
  margin-top: 10px;
}

.form .section .control-group .control {
  width: 100%;
}


.form .section .control-group .control-label {
  display: block;
  width: 100%;
  margin-bottom: 4px;
}

result in jsfiddle: link

score 1 · Answer 3

I did something like that, which is very close to what you want. Look if it helps.

#formulario {
  background-color: #111;
  width: 60%; 
  margin-left: 20%;
  padding: 45px 15px;
  height: auto;
}

.campo {
  width: 50%;
  float: left;
  color: #c0c0c0;
}

.campo input {
  margin: 10px 1%;
  padding: 8px 1%;
  width: 90%;
}

.campo select {
  margin: 10px 1%;
  padding: 8px 1%;
  width: 94%;
}

<form id="formulario">

<div class="campo">
  <label>Selecione algo</label>
  <select value="Selecione(select)">
      <option disabled>Selecione Algo</option>
  </select>
</div>

<div class="campo">
    <label>Escreva algo</label>
    <input type="text" placeholder="Escreva algo (input)"/>
</div>

<div class="campo">
    <input type="text"  placeholder="Escreva algo (input)"/>
</div>

<div id="checkbox" class="campo2">
    <label> Marque algo</label>
    <input type="checkbox"> Marcado  
</div>

</form>