Putting input is below the label

Asked

Viewed 1,803 times

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 css html5 css3

  • How so online ? explains better what you want, so we can help you

  • What do you mean "stay in line"?

  • Here is already online (inline)

  • @Cianobarbarossa I had it wrong, I thought of one thing and wrote another. I need the input to stay always below the label. It’s getting on the freight.

  • @Dudaskank I mispressed, I thought of one thing and wrote another. I need the input to stay always below the label. It’s getting in the shipping.

  • @13dev I mispressed, thought of one thing and wrote another. I need the input to stay always below the label. It’s getting on the freight.

Show 1 more comment

3 answers

1

If what you need is for it to stay at the bottom line you can add a <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>

  • Here it works but here on my screen not. I believe it must be something of bootstrap that prevents the br

  • @Weird James. Maybe your browser is caching. If you’re in Chrome, log in to your page and press: CTRL + SHIFT + R

  • @Francisco Nada...rsrs

  • What a fight for such a simple.... rsrs

  • Are you using any ready css that you left to examine?

  • I’m doing wearing bootstrap

  • already tried to search there in the file for a display:inline-block in the input selector?

Show 2 more comments

1

Now I understand, just change the property display 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 not on your page, some other CSS is influencing it. Inspect the elements to try to find the cause of the problem.

  • I did, but it didn’t work.

1

tries to use the pseudoelement :before 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>

Browser other questions tagged html css html5 css3

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