2

Estou tendo problemas para alinhar 2 campos lado a lado num formulário, o primeiro caso seria um select ao lado de um input e, no outro, dois inputs.

Ex:

inserir a descrição da imagem aqui

HTML:

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

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

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

3 Respostas 3

2

Bem, se foi o que eu entendi é assim, se você quer alinhar o texto com o check box, você não pode fechar a tag do texto e depois colocar o checkbox, tem que colocar o checkbox dentro da tag texto, e depois fecha... assim ficam alinhados. Teste assim:

<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>

Depois só fazer o resto com CSS, se for isso que você quer, não tem muito segredo.

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;
}

resultado no jsfiddle: https://jsfiddle.net/Henrique_Araujo/kkhr5d59/

2
  • Mudei o <form> de lugar porque dentro possui algumas divs e outros campos e parece que desfigurou tudo, sei muito pouco de css, mas vi algo novo nesse código, display: flex? Commented 20/06/2016 às 3:44
  • @NGTHM4R3 display: flex, ajuda muito no alinhamento. sugiro que vc procure no google por "flex box"! :d Commented 21/06/2016 às 14:55
1

Fiz algo assim, que é bem próximo do que quer. Olha se lhe ajuda.

#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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .