Wie kann ich ein Eingabeelement in dieselbe Zeile wie sein Label setzen?

Ich würde gerne eine label und ein input[type=text] auf der gleichen Linie, und ich möchte mich für die input's Breite zu füllen, die restliche Breite des enthaltenden Elements, unabhängig von der Länge der label-text (siehe erstes Bild).

Habe ich versucht zu verwenden width: auto; für die inputaber es scheint eine statische Breite. Ich habe auch versucht width: 100%;aber das verschiebt die input um in eine neue Zeile (siehe zweites Bild).

Wie kann ich ein Eingabeelement in dieselbe Zeile wie sein Label setzen?

Wie kann ich erreichen, das mit CSS?

InformationsquelleAutor der Frage enenkey | 2011-08-04

  1. 79

    Ist es möglich ohne JavaScript-Unterstützung finden Sie unter: http://jsfiddle.net/Khmhk/

    Dies funktioniert im IE7+ und alle modernen Browser.

    HTML:

    <label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>

    CSS:

    label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}

    Der Grund, warum overflow: hidden ist so magisch nützlich in diesem Fall ist hier erklärt.

    display: table-cell ist eine weitere option, siehe: http://jsfiddle.net/Khmhk/1/

    Diese funktioniert in IE8+ und alle modernen Browser:

    HTML:

    <div class="container">
    <label for="test">Label</label>
    <span><input name="test" id="test" type="text" /></span>
</div>

    CSS:

    .container {
    display: table;
    width: 100%
}
label {
    display: table-cell;
    width: 1px;
    white-space: nowrap
}
span {
    display: table-cell;
    padding: 0 0 0 5px
}
input {
    width: 100%
}

    InformationsquelleAutor der Antwort thirtydot

  2. 0

    Die noch funktioniert für mich, aber ftr das ist wie Bootstrap 3 funktioniert es (Dank @morten.c Antwort auf "Bootstrap full-width-text-Eingabe innerhalb der inline-form"). Weiß nicht, ob es schwerer zu brechen, als @thirtydot ist, oder etwas. Aber hier ist es, und hier ist ein Turnschuhdas gibt auch ein einfaches Beispiel von, wie man mit einem schmalen Bildschirm-Pause.

    HTML:

    <form class="responsive">
    <input type="text" placeholder="wide input..."/>
    <span>
        <input type="submit"/>
    </span>
</form>

    CSS:

    form.responsive, form.responsive * {
    box-sizing: border-box;
    width: 100%;
    height: 40px !important; /* specify a height */
}
form.responsive {
    position: relative;
    display: table;
    border-collapse: separate;

    /* just to be safe */
    border: 0;
    padding: 0;
    margin: 0;
}
form.responsive > input {
    position: relative;
    width: 100%;
    float:left;
    margin-bottom: 0;
    display: table-cell;
}
form.responsive span {
    position: relative;
    width: 1%;
    vertical-align: middle;
    display: table-cell;
}
form.responsive span input {
    margin: 0;
    margin-left: -1px;
    display: inline-block;
    vertical-align: middle;
    overflow: visible;
}

    InformationsquelleAutor der Antwort henry

Schreibe einen Kommentar