0

Como fazer para esse input ficar abaixo do label.

.passo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background: #29b2fe;
  margin-right: 15px;
}

.input {

}
<div class="container">
  <div class="row row-margem">
    <h1 class="h2">Iniciando</h1>
  </div>

  <form action="">
    <div class="row">
      <span class="passo">1</span><label class="h3">Crie uma conta</label><br>
      <input id="email" class="input">
    </div>

  </form>

</div>

6
  • Como assim em linha ? explica melhor o que pretendes, para nós conseguirmos te ajudar
    – 13dev
    Commented 28/07/2017 às 19:30
  • Como assim "ficar em linha"? Commented 28/07/2017 às 19:31
  • Aqui já está em linha (inline)
    – Dudaskank
    Commented 28/07/2017 às 19:32
  • @CianoBarbarossa Espressei erradamente, pensei em uma coisa e escrevi outra. Preciso que o input fique sempre abaixo do label. Esta ficando na frete.
    – Tiago
    Commented 28/07/2017 às 19:34
  • @Dudaskank Espressei erradamente, pensei em uma coisa e escrevi outra. Preciso que o input fique sempre abaixo do label. Esta ficando na frete.
    – Tiago
    Commented 28/07/2017 às 19:35

3 Respostas 3

1

Se o que você precisa é que ele fique na linha de baixo você pode adicionar um <br> depois de <label>

.passo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background: #29b2fe;
  margin-right: 15px;
}

.input {}
<div class="container">
  <div class="row">
    <span class="passo">1</span><label class="h3">Crie uma conta</label><br>
    <input id="email" class="input">
  </div>
</div>

7
  • Aqui funciona mas aqui na minha tela não. Acredito que deve ser algo do bootstrap que impede o br
    – Tiago
    Commented 28/07/2017 às 19:38
  • @Tiago Estranho. Pode ser que seu navegador esteja guardando cache. Se estiver no Chrome, entre na sua pagina e aperte: CTRL + SHIFT + R
    – Francisco
    Commented 28/07/2017 às 19:41
  • @Francisco Nada...rsrs
    – Tiago
    Commented 28/07/2017 às 19:44
  • Que luta para uma tão simples....rsrs
    – Tiago
    Commented 28/07/2017 às 19:44
  • Você está usando algum css pronto que você deixou de examinar? Commented 28/07/2017 às 19:45
1

tenta usar o pseudoelemento :before para forcar uma quebra de linha

.passo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background: #29b2fe;
  margin-right: 15px;
}

input:before {
  content: '\a';
  white-space: pre;
}
<div class="container">
  <div class="row">
    <span class="passo">1</span><label class="h3">Crie uma conta</label><br>
    <input id="email" class="input">
  </div>
</div>

1

Agora entendi rs, basta trocar a propriedade display do elemento. Saiba mais sobre display.

.input {
  display: block;
}
<div class="container">
      <div class="row">
        <span class="passo">1</span><label class="h3"> Crie uma conta</label><br>
        <input id="email" class="input">
      </div>
    </div>

Se aqui funciona e na sua página não, algum outro CSS está influenciando. Inspecione os elementos para tentar encontrar a causa do problema.

1
  • Coloquei, mas não funcionou.
    – Tiago
    Commented 28/07/2017 às 19:39

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 .