css largeur d'étiquette ne prenant pas effet

Question

J'ai une forme générique, que je voudrais style à aligner les étiquettes et les champs de saisie. Pour une raison quelconque, quand je donne une largeur de l'étiquette sélecteur, 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:

Ce que je fais mal?

Answer 1

N'display: inline-block

http://jsfiddle.net/aqMN4/

Answer 2

L' label est un élément inline, c'est seulement comme ça que ça doit être.

Essayez d'ajouter un display attribut soit inline-block ou block.

Answer 3

Faire un bloc d'abord, puis flotter à 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
}

Answer 4

Je crois que les étiquettes sont en ligne, et donc ils ne prennent pas la largeur. Peut-être essayez d'utiliser "display: block" et va à partir de là.

Answer 5

donner le style

display:inline-block;

espérons que cela aidera'