IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Aligner des label et des champs


Sujet :

Positionnement en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut Aligner des label et des champs
    Bonjour à tous,

    Dans le code suivant, je n'arrive pas à aligner horizontalement le texte de l'étiquette et le champ de saisie.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <form method="post" class="settings" action="frontend/settings.php">
    	<fieldset><legend>Valeurs par défaut</legend>
    		<label><span>Pays</span><select name='country' id='country'><option value='' label='&lt; ---- &gt;'></option><option value='AF'>Afghanistan</option><option value='ZW'>Zimbabwe</option></select></label><br>
    		<label><span>Langue</span><select name='language' id='language'><option value='' label='&lt; ---- &gt;'></option><option value='ab'>abkhaze</option><option value='zu'>zoulou</option></select></label><br>
    	</fieldset>
    </form>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .settings{
    	padding:10px;
    }
    .settings label{
    	display:inline-block;
    }
    .settings span{
    	display:inline-block;
    	width:100px;
    	font-size:.8rem;
    }

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 212
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 212
    Par défaut
    Bonjour,
    teste avec :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    label {
      display: block;
      line-height: 3;                 /* ton sauveur */
      background: #DEF;
    }

  3. #3
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut
    Mon code fonctionne. J'avais une information de largeur contradictoire dans ma feuille css pour le label. J'ai modifié mon code en précisant une largeur plus importante.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Aligner des champs verticalement en css
    Par MInfo25 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 13/11/2016, 12h14
  2. Réponses: 1
    Dernier message: 19/09/2012, 15h32
  3. Réponses: 9
    Dernier message: 10/03/2007, 08h39
  4. [css] aligner des champs verticalement
    Par tiger33 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 08/09/2006, 14h33
  5. [Tableaux] Alignement des champs d'un formulaire
    Par jack554 dans le forum Langage
    Réponses: 7
    Dernier message: 15/09/2005, 15h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo