Put input is below the label

Question

Put input is below the label

Navigation

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

0

How to make this input stay below the 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>

html html5 css css3

asked by anonymous 28.07.2017 / 21:26

3 answers

Creating field with weight format with two decimal places and 3 houses before the comma Sort select by date

score 1 · Answer 1

If what you need is for it to be on the bottom line you can add <br> after <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>

score 1 · Answer 2

try to use the : before pseudoelement to force a line break

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

score 1 · Answer 3

Now I understand rs, just change the display property of the element. Learn more about 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>

If it works here and your page does not, some other CSS is influencing it. Inspect the elements to try to find the cause of the problem.