el ancho de la etiqueta CSS no tiene efecto

112

Tengo un formulario genérico, que me gustaría diseñar para alinear las etiquetas y los campos de entrada. Por alguna razón, cuando le doy un ancho al selector de etiquetas, no sucede nada:

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

Salida:

ingrese la descripción de la imagen aquí

jsFiddle

¿Qué estoy haciendo mal?

html css label El único
fuente
Por cierto, ¿es <p>realmente una buena idea envolver las secciones del formulario en etiquetas?
JGallardo

Respuestas:

215

Hacer display: inline-block:

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

http://jsfiddle.net/aqMN4/

Davis
fuente
1
Quédate con Inline-block. Probado en IE7, IE8, IE9, FF
Davis
1
¿Existe una solución alternativa para colocar cada elemento en un <p>?
Colin D
1
@ColinD Recomendaría usar divs, no etiquetas <p>.
Davis
37

Utilizar display: inline-block;

Explicación:

El labeles un elemento en línea, lo que significa que es tan grande como debe ser.

Establezca la displaypropiedad en inline-blocko blockpara widthque surta efecto.

Ejemplo:

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

usuario
fuente
1
¡Gracias! inline-block es lo que necesitaba. Block hace que parezca extraño.
TheOne
2
Tenga en cuenta que el soporte de inline-block es incompleto en IE por debajo de IE8, probablemente no sea un gran problema en estos días, pero algo a tener en cuenta. (fuente quirksmode.org/css/display.html )
n00dle
1
@PandaWood Lo siento, han pasado casi 2 años desde que comentaste esta publicación. Pero, estoy respondiendo a tu comentario para que otros lectores no se equivoquen con la explicación dada por el autor de esta publicación. Este último ha razonado que el labelelemento no respeta la widthpropiedad porque es un elemento en línea. Me gustaría señalar que el inputelemento también es un elemento en línea de forma predeterminada. Pero permite cambiar su ancho usando la propiedad width a diferencia del labelelemento. Por tanto, el razonamiento del autor no es correcto.
ghd
6

Creo que las etiquetas están en línea, por lo que no toman un ancho. Tal vez intente usar "display: block" y vaya desde allí.

Miguel
fuente
6

Primero conviértalo en un bloque, luego flote a la izquierda para dejar de empujar el siguiente bloque hacia una nueva línea. 

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

dar el estilo

display:inline-block;

espero que esto ayude '

Filemón philip Kunjumon
fuente
4

labelEl displaymodo predeterminado es inline, lo que significa que se ajusta automáticamente a su contenido. Para establecer un ancho, deberá establecer display:blocky luego hacer algunos ajustes para colocarlo correctamente (probablemente involucrando float)

n00dle
fuente