[Resolvido] Alinhar com display: block

[Marcelo de Andrade 2]

Boa tarde, pessoal. Gostaria da ajuda de vocês para resolver um problema que não consegui sozinho. Estou criando um formulário, apenas para estudo, formatando com CSS o label, input, select, etc... Estou tentando alinha dois campos SELECT lado a lado, porém não consegui, mesmo alterando a formatação do display que estou utilizando. Vocês podem me indicar onde estou errando e se estou fazendo da maneira certa? Obrigado.

 

.text {
display:block;
border: 1px solid #ccc;
background-color: #fff;
width: 200px;
height: 30px;
color: #333;
}

select {
display:block;
border: 1px solid #ccc;
background-color: #fffffe;
width: 200px;
height: 30px;
border:none;
}

.label {
display:block;
       width: 200px;
margin-left:10%;
margin-top: 10px;
       float:left;
}

 

Com o código acima, o meu formulário fica bagunçando desse jeito:

 

Onde o SELECT marcado como XXXXXXXXXXXXXXX, deveria ficar ao lado do SELECT com o valor SSP.

[Henrique Barcelos 290]

Ao lado?

Use float nesse select e certifique-se que a largura do seu formulário comporta ambos os selects um do lado do outro...

 

Aqui eu explico um pouco melhor como funciona essa propriedade:

:seta: http://henriquebarcelos.in/blog/2011/10/29/serie-de-video-tutoriais-webstandards-css-04-tabelas-livre-se-delas-para-construcao-de-layouts/

 

E aqui eu explico direitinho o que são elementos inline e de block:

:seta: http://henriquebarcelos.in/blog/2011/10/28/serie-de-video-tutoriais-webstandards-css-02-elementos-de-nivel-de-bloco-e-inline/

[Marcelo de Andrade 2]

Muito obrigado pela dica, Henrique Barcelos. Eu estava utilizando o float, mas acho que da maneira incorreta. Não sei se fiz certo, mas apliquei o float somente no select que eu queria ao lado.

 

Problema solucionado.