la largeur de l'étiquette css ne prend pas effet

112

J'ai un formulaire générique, que j'aimerais styliser pour aligner les étiquettes et les champs de saisie. Pour une raison quelconque, lorsque je donne une largeur au sélecteur d'étiquettes, rien ne se passe:

HTML: 

<form id="report-upload-form" method="POST" action="" enctype="multipart/form-data">
    <p>
        <label for="id_title">Title:</label> 
        <input id="id_title" type="text" class="input-text" name="title"></p>
    <p>
        <label for="id_description">Description:</label> 
        <textarea id="id_description" rows="10" cols="40" name="description"></textarea></p>
    <p>
        <label for="id_report">Upload Report:</label> 
        <input id="id_report" type="file" class="input-file" name="report">
    </p>
</form>

CSS: 

#report-upload-form {
    background-color: #316091;
    color: #ddeff1;
    font-weight:bold;
    margin: 23px auto 0 auto;
    border-radius:10px;
    width: 650px;
    box-shadow:  0 0 2px 2px #d9d9d9;
}

#report-upload-form label {
    padding-left:26px;
    width:125px;
    text-transform: uppercase;
}

#report-upload-form input[type=text], 
#report-upload-form input[type=file],
#report-upload-form textarea {
    width: 305px;
}

Production:

entrez la description de l'image ici

jsFiddle

Qu'est-ce que je fais mal?

html css label Celui
la source
Au fait, est-ce <p>vraiment une bonne idée d' encapsuler les sections du formulaire dans des balises?
JGallardo

Réponses:

215

Faire display: inline-block:

#report-upload-form label {
    padding-left:26px;
    width:125px;
    text-transform: uppercase;
    display:inline-block
}

http://jsfiddle.net/aqMN4/

Davis
la source
1
Stick avec Inline-block. Testé dans IE7, IE8, IE9, FF
Davis
1
Existe-t-il une solution de contournement pour placer chaque élément dans un <p>?
Colin D
1
@ColinD Je recommanderais d'utiliser des divs, pas des balises <p>.
Davis
37

Utilisation display: inline-block;

Explication:

Le labelest un élément en ligne, ce qui signifie qu'il est seulement aussi grand que nécessaire.

Définissez la displaypropriété sur inline-blockou blockpour que la widthpropriété prenne effet.

Exemple:

#report-upload-form {
    background-color: #316091;
    color: #ddeff1;
    font-weight: bold;
    margin: 23px auto 0 auto;
    border-radius: 10px;
    width: 650px;
    box-shadow: 0 0 2px 2px #d9d9d9;

}

#report-upload-form label {
    padding-left: 26px;
    width: 125px;
    text-transform: uppercase;
    display: inline-block;
}

#report-upload-form input[type=text], 
#report-upload-form input[type=file],
#report-upload-form textarea {
    width: 305px;
}
<form id="report-upload-form" method="POST" action="" enctype="multipart/form-data">
    <p><label for="id_title">Title:</label> <input id="id_title" type="text" class="input-text" name="title"></p>
    <p><label for="id_description">Description:</label> <textarea id="id_description" rows="10" cols="40" name="description"></textarea></p>
    <p><label for="id_report">Upload Report:</label> <input id="id_report" type="file" class="input-file" name="report"></p>
</form>
Développer l'extrait

utilisateur
la source
1
Merci! inline-block est ce dont j'avais besoin. Block fait paraître bizarre.
TheOne
2
Sachez que la prise en charge du bloc en ligne est sommaire dans IE sous IE8 - probablement pas trop de problème ces jours-ci, mais quelque chose à garder à l'esprit. (source quirksmode.org/css/display.html )
n00dle
1
@PandaWood Désolé, cela fait presque 2 ans que vous avez commenté ce post. Mais, je réponds à votre commentaire afin que les autres lecteurs ne soient pas induits en erreur par l'explication donnée par l'auteur de ce post. Ce dernier a estimé que l' labelélément ne respectait pas la widthpropriété car il s'agissait d'un élément en ligne. Je tiens à souligner que l' inputélément est également un élément en ligne par défaut. Mais il permet de modifier sa largeur en utilisant la propriété width contrairement à l' labelélément. Par conséquent, le raisonnement de l'auteur n'est pas correct.
ghd
6

Je pense que les étiquettes sont en ligne et qu'elles ne prennent donc pas de largeur. Essayez peut-être d'utiliser "display: block" et de partir de là.

Mike
la source
6

Faites-en d'abord un bloc, puis flottez à gauche pour arrêter de pousser le bloc suivant dans une nouvelle ligne. 

#report-upload-form label {
                           padding-left:26px;
                           width:125px;
                           text-transform: uppercase;
                           display:block;
                           float:left
}
ctrl-alt-dileep
la source
5

donner du style

display:inline-block;

j'espère que cela aidera '

Philémon Philippe Kunjumon
la source
4

labelLe displaymode par défaut est inline, ce qui signifie qu'il s'adapte automatiquement à son contenu. Pour définir une largeur, vous devrez définir display:blockpuis faire quelques manipulations pour le positionner correctement (impliquant probablement float)

n00dle
la source