Text mit Eingabe in einer Zeile

Question

Ich habe mit Eingabefeld und Text div

Hier Code

.form-control { 
 
    display: block; 
 
    width: 100%; 
 
    height: 34px; 
 
    position: relative; 
 
    padding: 6px 12px; 
 
    font-size: 14px; 
 
    line-height: 1.42857143; 
 
    color: #555; 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
    border-color: #1f66b4; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
    background-image: none; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
 
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 
 
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
}

<div style="width:50%;height:100%;float: left;padding-left:20%"> 
 
      <form style="text-align:center;"> 
 
       <b>dfsdfsdfsdf</b> 
 
       <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="margin: 30px auto 0;border-radius:50px;border-width: 1px;"> 
 
      </form> 
 
     </div>

Aber Text ist über Eingang.

ich brauche, um Text in einer Reihe mit dem Eingang zu machen. Wie kann ich das tun?

Answer 1

Hoffe, was Sie bereits haben funktioniert gut. Probieren Sie es aus, indem Sie das folgende Snippet ausführen.

<div style="width:50%;height:100%;float: left;padding-left:20%"> 
 
     <form style="text-align:center;"> 
 
      <b>dfsdfsdfsdf</b> 
 
      <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="margin: 30px auto 0;border-radius:50px;border-width: 1px;"> 
 
     </form> 
 
    </div>

Answer 2

Wickeln Sie das Eingangs-Tag in einem div. Verwenden Label-Tag statt b-Tag (es hilft Screenreadern) dann CSS geben "float: left" für das Label und div (Einwickeln des Eingangs)

atlast die Marge aus Ihrer Eingabe entfernen und GIV einige margin-top für das Label und nach Schwimmer, klar es

<div style="width:50%;height:100%;float: left;padding-left:20%"> 
    <form style="text-align:center;"> 
     <label style="float:left; margin-top:6px">dfsdfsdfsdf</label> 
     <div style="float:left"> 
      <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="border-radius:50px;border-width: 1px;"> 
     </div> 
     <div style="clear:left"> 
    </form> 
</div> 

Answer 3

Sie können Polsterung für den Platzhalter hinzufügen, aber Browser-Unterstützung erfordert Präfixe.

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
 
    padding-left: .3em; 
 
} 
 
::-moz-placeholder { /* Firefox 19+ */ 
 
    padding-left: .3em; 
 
} 
 
:-ms-input-placeholder { /* IE 10+ */ 
 
    padding-left: .3em; 
 
} 
 
:-moz-placeholder { /* Firefox 18- */ 
 
    padding-left: .3em; 
 
}

<div style="width:50%;height:100%;float: left;padding-left:20%"> 
 
    <form style="text-align:center;"> 
 
    <b>dfsdfsdfsdf</b> 
 
    <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="margin: 30px auto 0;border-radius:50px;border-width: 1px;"> 
 
    </form> 
 
</div>

Answer 4

<div style="width:50%;height:100%;float: left;padding-left:20%"> 
 
      <form style="text-align:center;"> 
 
       <lable> dfsdfsdfsdf</label> 
 
       <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="margin: 30px auto 0;border-radius:50px;border-width: 1px;"> 
 
      </form> 
 
     </div>