largura da etiqueta css não está em vigor

112

Eu tenho um formulário genérico, que gostaria de estilizar para alinhar os rótulos e os campos de entrada. Por alguma razão, quando eu dou uma largura para o seletor de rótulo, nada acontece:

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

Resultado:

insira a descrição da imagem aqui

jsFiddle

O que estou fazendo de errado?

html css label Único
fonte

A propósito, envolver as seções do formulário em <p>tags é realmente uma boa ideia?

JGallardo

214

Faça 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

Fique com o Inline-block. Testado no IE7, IE8, IE9, FF

Davis

1

Existe uma solução alternativa para colocar cada elemento em um <p>?

Colin D

1

@ColinD Eu recomendaria usar divs, não tags <p>.

Davis

36

Usar display: inline-block;

Explicação:

O labelé um elemento embutido, o que significa que é tão grande quanto precisa ser.

Defina a displaypropriedade como inline-blockou blockpara widthque ela tenha efeito.

Exemplo:

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

do utilizador
fonte

1

Obrigado! bloco embutido é o que eu precisava. Block faz com que pareça estranho.

TheOne

2

Esteja ciente de que o suporte do bloco inline é incompleto no IE abaixo do IE8 - provavelmente não é um grande problema atualmente, mas é algo para se manter em mente. (fonte quirksmode.org/css/display.html )

n00dle

1

@PandaWood Desculpe, faz quase 2 anos que você comentou neste post. Mas, estou respondendo ao seu comentário para que outros leitores não se enganem com a explicação dada pelo autor deste post. Este último raciocinou que o labelelemento não respeita a widthpropriedade porque é um elemento embutido. Gostaria de salientar que o inputelemento também é um elemento embutido por padrão. Mas ele permite que sua largura seja alterada usando a propriedade width ao contrário do labelelemento. Portanto, o raciocínio do autor não é correto.

ghd

6

Acredito que os rótulos são embutidos e, portanto, não ocupam largura. Talvez tente usar "display: block" e partir daí.

Mike
fonte

6

Faça um bloco primeiro, então flutue para a esquerda para parar de empurrar o próximo bloco para uma nova linha.

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

ctrl-alt-dileep
fonte

5

dê o estilo

display:inline-block;

espero que isso ajude '

Philemon philip Kunjumon
fonte

4

labelé o displaymodo padrão inline, o que significa que ele se ajusta automaticamente ao seu conteúdo. Para definir uma largura, você precisará definir display:blocke, em seguida, fazer alguns ajustes para posicioná-la corretamente (provavelmente envolvendo float)

n00dle
fonte

largura da etiqueta css não está em vigor

Respostas: