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

Question

Die Beschriftung muss in der gleichen Zeile stehen wie das Eingabefeld, das sie beschriftet. Ich möchte, dass diese Elemente fließen, wie sie normalerweise würde, wenn das Fenster Größe ändert, ich möchte nur die Beschriftung auf der linken Seite der Eingabe bleiben sie beschriften. Wie würde ich das machen? Hat jemand eine Idee?

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

ANTWORT: Josiah Ruddell's Antwort war auf dem richtigen Weg, 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>

Answer 1

Beide in eine div mit nowrap.

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

Answer 2

Legen Sie die input in das Etikett ein und lassen Sie die for Attribut

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

Aber was ist, wenn Sie den Text gestalten wollen? Verwenden Sie einfach eine span .

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

Answer 3

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

...

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

Umschließen Sie Ihre Eingaben mit dem Label-Tag

Answer 4

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

Die folgende CSS-Klasse erzwingt, dass der Beschriftungstext inline fließt und abgeschnitten wird, wenn seine Länge größer als die maximale Länge der Beschriftung ist.

.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>

Answer 5

Damit die Eingabe nicht die ganze Zeile einnimmt und ich die Eingabe in einem Absatz platzieren kann, habe ich ein span-Tag und display to inline-block verwendet

html:

<span>cluster:
        <input class="short-input" type="text" name="cluster">
</span>

css:

span{display: inline-block;}