Retour à la ligne correct dans une balise de plage

J'ai un formulaire avec un message de validation en ligne dans une plage.Retour à la ligne correct dans une balise de plage

<span id="EndTimeErrors"> 
    <label for="EndTime" class="field-validation-error"> 
     Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34 
    </label> 
</span>

Ugly wrap with span

Malheureusement, le retour à la ligne est vraiment moche. Je pourrais mettre le message de validation dans un div, pour embellir le message. Le résultat est meilleur, mais pas parfait.

<div id="EndTimeErrors"> 
    <label for="EndTime" class="field-validation-error"> 
     Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34 
    </label> 
</div>

Using a div

Ce que je veux vraiment est quelque chose comme ceci:

Mockup of goal

Quel code CSS utiliseriez-vous pour obtenir le résultat souhaité?

Source

2010-02-10 Sandra

Essayez

white-space: nowrap;

Source

2010-02-10 15:03:24 wawooca

Merci! Cela m'a donné le même résultat que l'utilisation d'un div au lieu de la durée. Cela a l'air meilleur que la durée, mais pas parfait. – Sandra

Solution la plus élégante jusqu'à présent. – Chris

Idéal pour que votre contenu vole sur le bord de l'écran! Ne pas oublier d'utiliser 'display: block' – JackalopeZero

La raison la plus probable que je peux penser à provoquer la différence entre vos <div> et <span> balises est qu'un élément <div> est considéré comme un élément de bloc, tandis qu'un élément <span> est considéré en ligne.

Avez-vous une sorte d'élément d'emballage pour les éléments flottants, quelque chose qui ressemble à ceci?

<div class="row"> 
    <div style="float: left;"> 
     <span>Endzeit:</span> 
    </div> 
    <div style="float: left;"> 
     <input type="text" /> <span>10.2.2010</span> 
    </div> 
    <div id="EndTimeErrors"> 
     <label for="EndTime" class="field-validation-error"> 
       Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34 
     </label> 
    </div> 
</div>

Sinon, essayez-le et je pense que cela pourrait fonctionner.

Source

2010-02-10 15:08:18 vrutberg

Utiliser plusieurs divs et les faire flotter fonctionnerait, mais je veux éviter trop de boîtes div. J'espérais qu'il y aurait un style CSS qui me permettrait d'utiliser un span. Le texte devrait commencer à la même position que la première ligne et non seulement au début de la deuxième ligne. – Sandra

Parfois, tout ce que vous avez besoin est un <br/>

Bitte geben Sie eine gültige Uhrzeit ein, <br/>zum Beispiel 8:00 oder 14:34

Source

2010-02-10 15:36:33 graphicdivine

J'ai ajouté un br et dans Firefox 3.57 le début des deux lignes n'est toujours pas aligné. Les contrôles
où la ligne se brise, mais malheureusement, il ne contrôle pas où la nouvelle ligne commence. – Sandra

Je vois. Posibly, mettre display: inline-block sur l'étiquette contenant. – graphicdivine

Voici le code que je fini avec:

<span id="EndTimeErrors" style="position: absolute; left: 300px;"> 
    <label for="EndTime" class="field-validation-error"> 
     Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34 
    </label> 
</span>

je positionné la portée absolue et déplacé 300px vers la gauche.

Cela fonctionne, mais je ne suis pas totalement satisfait de cette solution, car les 300px sont codés en dur. Si la longueur de la substance devant le message de validation changerait, je devrais également changer le 300px.

Source

2010-02-10 16:01:35 Sandra

Retour à la ligne correct dans une balise de plage

Répondre

Questions connexes