Obliger l'étiquette à circuler en ligne avec l'entrée qu'elle étiquette

Question

J'ai besoin que l'étiquette reste sur la même ligne que le champ de saisie qu'elle étiquette. Je veux que ces éléments s'écoulent comme ils le feraient normalement lorsque la fenêtre est redimensionnée, je veux juste que l'étiquette reste à gauche du champ de saisie qu'elle étiquette. Comment dois-je faire ? Avez-vous des idées ?

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

REPONSE : La réponse de Josiah Ruddell était sur la bonne voie, l'utilisation d'un span au lieu d'un div m'a donné le comportement correct. Merci !

<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

Les mettre tous les deux dans un div avec nowrap.

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

Answer 2

Mettez le input dans l'étiquette, et abandonnez le for attribut

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

Mais bien sûr, que se passe-t-il si vous voulez donner un style au texte ? Il suffit d'utiliser un span .

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

Answer 3

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

La classe CSS suivante force le texte de l'étiquette à s'afficher en ligne et à être coupé si sa longueur est supérieure à la longueur maximale de l'étiquette.

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

Si vous voulez qu'ils soient paragraphe, alors utilisez-le.

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

Les deux sites <label> y <input> sont des contenus de paragraphe et de flux, vous pouvez donc les insérer comme éléments de paragraphe et comme éléments de bloc.

Answer 5

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

...

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

Enveloppez vos entrées dans la balise label