web-dev-qa-db-fra.com

Forcer l'étiquette à circuler en ligne avec l'entrée qu'ils étiquettent

J'ai besoin que l'étiquette reste sur la même ligne que le champ de saisie qu'ils étiquettent. Je veux que ces éléments coulent comme ils le feraient normalement lorsque la fenêtre se redimensionne, je veux juste que l'étiquette reste à gauche de l'entrée qu'ils étiquetent. Comment ferais-je ça? Des idées?

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

RÉPONSE: La réponse de Josiah Ruddell était sur la bonne voie, utiliser une durée au lieu de div m'a donné le bon comportement. 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>
cssinputlabel
34
user366735

mettez-les tous les deux dans un div avec nowrap.

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

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

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

Mais bien sûr, que se passe-t-il si vous souhaitez styliser le texte? Utilisez simplement un span.

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

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

La classe CSS suivante force le texte de l'étiquette à être aligné et à être tronqué 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>
1
Razan Paul
<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

0
Omar

Si vous voulez qu'ils soient des paragraphes, utilisez-les.

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

Tous les deux <label> et <input> sont du contenu de paragraphe et de flux afin que vous puissiez les insérer comme éléments de paragraphe et comme éléments de bloc.

0
PhoneixS