Display input und label gleichen Linie mit Bootstrap

Ich würde gerne die Anzeige -, label-und Eingänge auf der gleichen Linie :

Habe ich versucht im CSS:

form  label {
    display:block;
    float:left;

}

http://jsfiddle.net/kY5LL/18/

Ihre "Anfrage Senden"-button sieht nett aus !

InformationsquelleAutor user2706463 | 2013-08-30

  1. 3

    hier ist es 

    .span6{
overflow:hidden;
 display:inline;
}
.span6 label, .span6 input {
display:inline-block;
}
.span6 input {
width:70%;
margin-left:3%;
}

    AKTUALISIERT FIDDLE

    InformationsquelleAutor Ritabrata Gautam

  2. 1

    Wenn Sie Bootstrap 3.x:

    <form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputType" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="inputCity" placeholder="Input text">
        </div>
    </div>
</form>

    Geige

    Es funktioniert nicht in der Geige.
    sind Sie sicher? es funktioniert bei mir in Firefox 37
    Sich zu entschuldigen. Nachdem ich das nochmal überprüfen, es scheint, dass ich brauche, um die Größe des "Ergebnis-Fenster" in die Geigen, damit es funktioniert. Unten mein screenshot für beide Fälle. Nicht inline: i.imgur.com/PQaHOaE.png Inline: i.imgur.com/9yxje01.png Mein browser ist Chrome 41 ich will un-down-Abstimmung Ihre Antwort jetzt, aber ich kann nicht.

    InformationsquelleAutor Paulo Fidalgo

  3. 0

    Habe ich diese in mein Skript. Ich erstellt ein div-container-Feld und im inneren des Behälters, ein label, das Links zu einem input-element.

    .
    HTML

    <div class="container">
    <label>Firstname</label>
    <input type="text">
</div>

    CSS

    div.container{
  overflow:hidden;
}
label{
    width:70px;
    display:block;
    float:left;
    text-align:left;
}
input{
  width:240px;
  float:left;
}

    InformationsquelleAutor Nicole Stutz

  4. -1

    entfernen Sie die Klasse input-block-level gegeben input tag

    InformationsquelleAutor Girish Thimmegowda

Schreibe einen Kommentar