la larghezza dell'etichetta CSS non ha effetto

112

Ho un modulo generico, che vorrei modellare per allineare le etichette e i campi di input. Per qualche motivo quando assegno una larghezza al selettore di etichette, non succede nulla:

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;
}

Produzione:

inserisci qui la descrizione dell'immagine

jsFiddle

Che cosa sto facendo di sbagliato?

html css label

— L'unico
fonte

A proposito, avvolgere le sezioni del modulo nei <p>tag è davvero una buona idea?

— JGallardo

215

Fare display: inline-block:

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

http://jsfiddle.net/aqMN4/

— Davis
fonte

1

Attenersi al blocco in linea. Testato in IE7, IE8, IE9, FF

— Davis

1

Esiste una soluzione alternativa per inserire ogni elemento in un <p>?

— Colin D

1

@ColinD Suggerirei di utilizzare div, non tag <p>.

— Davis

37

Uso display: inline-block;

Spiegazione:

Il labelè un elemento inline, che significa che è solo grande come deve essere.

Impostare la displayproprietà su inline-blocko blockin modo che la widthproprietà abbia effetto.

Esempio:

#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>

Espandi lo snippet

— utente
fonte

1

Grazie! inline-block è ciò di cui avevo bisogno. Block lo fa sembrare strano.

— TheOne

2

Tieni presente che il supporto di inline-block è approssimativo in IE sotto IE8 - probabilmente non è un grosso problema di questi tempi, ma qualcosa da tenere a mente. (fonte quirksmode.org/css/display.html )

— n00dle

1

@PandaWood Scusa sono passati quasi 2 anni da quando hai commentato questo post. Ma rispondo al tuo commento in modo che gli altri lettori non siano fuorviati dalla spiegazione fornita dall'autore di questo post. Quest'ultimo ha ragionato che l' labelelemento non rispetta la widthproprietà perché è un elemento inline. Vorrei sottolineare che l' inputelemento è anche un elemento in linea per impostazione predefinita. Ma consente di modificare la sua larghezza utilizzando la proprietà width a differenza labeldell'elemento. Quindi il ragionamento dell'autore non è corretto.

— ghd

6

Credo che le etichette siano in linea e quindi non prendono una larghezza. Magari prova a usare "display: block" e vai da lì.

— Mike
fonte

6

Rendilo prima un blocco, quindi fluttua a sinistra per smettere di spingere il blocco successivo su una nuova linea.

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

— ctrl-alt-Dileep
fonte

5

dare lo stile

display:inline-block;

spero che questo possa aiutare '

— Filemone philip Kunjumon
fonte

4

labelLa displaymodalità predefinita è inline, il che significa che si adatta automaticamente al suo contenuto. Per impostare una larghezza dovrai impostare display:blocke poi fare un po 'di sfregamento per posizionarlo correttamente (probabilmente coinvolgendo float)

— n00dle
fonte