Etikett wird gezwungen, inline mit der Beschriftung zu fließen

Muss ich das label bleiben in der gleichen Zeile wie das Eingabefeld, die Sie bezeichnen. Ich möchte diese Elemente zu fließen, wie Sie normalerweise würde, wenn sich das Fenster ändert, ich will nur die label-stick auf der linken Seite der Eingang, die Sie bezeichnen. Wie soll ich das tun? Irgendwelche Ideen?

<label for="id1">label1:</label>
<input type="text" id="id1"/>
<label for="id2">label2:</label>
<input type="text" id="id2"/>

ANTWORTETE: Josiah Ruddell ' s Antwort auf dem richtigen Weg war, mit einem span anstelle von div gab mir das richtige Verhalten. Danke!

<span style="white-space:nowrap">
    <label for="id1">label1:</label>
    <input type="text" id="id1"/>
</span>
<span style="white-space:nowrap">
    <label for="id2">label2:</label>
    <input type="text" id="id2"/>
</span>

InformationsquelleAutor der Frage user366735 | 2010-11-17

  1. 30

    setzen Sie beide innerhalb einer div mit nowrap.

    <div style="white-space:nowrap">
    <label for="id1">label1:</label>
    <input type="text" id="id1"/>
</div>

    InformationsquelleAutor der Antwort Josiah Ruddell

  2. 9

    Setzen die input in das label, und Graben, die for Attribut

    <label>
  label1:
  <input type="text" id="id1" name="whatever" />
</label>

    Aber natürlich, was ist, wenn Sie wollen, um den Stil des Textes? Verwenden Sie einfach ein span.

    <label id="id1">
  <span>label1:</span>
  <input type="text" name="whatever" />
</label>

    InformationsquelleAutor der Antwort zzzzBov

  3. 0

    Wenn Sie wollen, Sie werden Absatz, dann verwenden Sie es.

    <p><label for="id1">label1:</label> <input type="text" id="id1"/></p>
<p><label for="id2">label2:</label> <input type="text" id="id2"/></p>

    Beide <label> und <input> Absatz-und flow-Inhalte, so können Sie als Absatz-Elementen und block-Elementen.

    InformationsquelleAutor der Antwort PhoneixS

  4. 0
    <style>
.nowrap {
    white-space: nowrap;
}
</style>

...

<label for="id1" class="nowrap">label1:
    <input type="text" id="id1"/>
</label>

    Wickeln Sie Ihre Eingaben innerhalb des label-tag

    InformationsquelleAutor der Antwort Omar

  5. 0

    http://jsfiddle.net/jwB2Y/123/

    Folgende CSS-Klasse erzwingen, den label-text zu fließen, inline und Holen Sie sich abgeschnitten, wenn seine Länge mehr als die max-Länge des Etiketts.

    .inline-label { 
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    float:left;     
    }

    HTML:

    <div>
    <label for="id1" class="inline-label">This is the dummy text i want to display::</label>
    <input type="text" id="id1"/>
</div>

    InformationsquelleAutor der Antwort Razan Paul

  6. -2

    Warum verwenden Sie nicht nur:

    label {
    display: block;
    width: 50px;
    height: 24px;
    float: left;
}

    InformationsquelleAutor der Antwort cachaito

Schreibe einen Kommentar