webentwicklung-frage-antwort-db.com.de

Erzwingen, dass die Beschriftung mit der von ihnen beschrifteten Eingabe inline fließt

Ich brauche das Etikett, um in der gleichen Zeile zu bleiben wie das Eingabefeld, das sie beschriften. Ich möchte, dass diese Elemente wie gewohnt fließen, wenn die Größe des Fensters geändert wird. Ich möchte nur, dass die Beschriftung links von der Eingabe bleibt, die sie beschriften. Wie würde ich das machen? Irgendwelche Ideen?

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

ANTWORT: Josiah Ruddells Antwort war auf dem richtigen Weg. Die Verwendung einer Spanne anstelle von div gab mir das richtige Verhalten. Vielen Dank!

<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>
cssinputlabel
34
user366735

lege sie beide in ein div mit nowrap.

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

Fügen Sie das input in das Etikett ein und lassen Sie das for -Attribut außer Kraft

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

Aber was ist, wenn Sie den Text stylen möchten? Verwenden Sie einfach ein span.

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

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

Die folgende CSS-Klasse erzwingt, dass der Etikettentext inline fließt und abgeschnitten wird, wenn seine Länge die maximale Länge des Etiketts überschreitet.

.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>
1
Razan Paul
<style>
.nowrap {
    white-space: nowrap;
}
</style>

...

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

Wickeln Sie Ihre Eingaben in das Label-Tag

0
Omar

Wenn Sie möchten, dass sie Absätze sind, verwenden Sie sie.

<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> sind Absatz- und Textflussinhalte, sodass Sie sie als Absatzelemente und als Blockelemente einfügen können.

0
PhoneixS