web-dev-qa-db-fra.com

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

J'ai un formulaire générique que j'aimerais styler 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;
}

Sortie:

enter image description here

Qu'est-ce que je fais mal?

htmlcsslabel
101
TheOne

Faire display: inline-block:

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

http://jsfiddle.net/aqMN4/

198
Davis

Utilisation display: inline-block;

Explication:

Le label est un élément en ligne, c'est-à-dire qu'il est aussi gros que nécessaire.

Définissez la propriété display sur inline-block ou block pour que la propriété width 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>
35
Quantastical

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

6
Mike

Commencez par en faire un bloc, puis flottez à gauche pour arrêter de pousser le prochain bloc vers une nouvelle ligne.

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

donner le style

display:inline-block;

espérons que cela aidera

5
Philemon philip Kunjumon

Le mode label par défaut de display est inline, ce qui signifie qu'il s'adapte automatiquement à son contenu. Pour définir une largeur, vous devez définir display:block puis faites quelques essais pour le positionner correctement (impliquant probablement float)

4
n00dle