Solucionado
Olá, queria gostaria de ter o seguinte resultado:
Qual a melhor forma de gerar estas linhas entre as cidades? Qual a forma mais eficiente de se alinhar um texto no centro de uma div horizontalmente e verticalmente?
Segue o meu código: http://jsfiddle.net/fitalr/g60yyq6u
Então Tiago,
Assim? coloque esse código abaixo para testar no seu.
.cidades {
width: 371px;
height: 60px;
box-sizing: border-box;
position: relative;
background-color: #900005;
color: #FFF;
float: left;
cursor: pointer;
padding-left: 20px;
}
.listacidades {
width: 371px;
background: #900005;
position: absolute;
display: none;
z-index: 100;
line-height: 60px;
vertical-align: middle;
text-align: center;
margin-left: -20px;
}
ul {
padding: 0 20px;
list-style: none;
}
li {
border-top: solid 1px #FFF;
}
li > a{
text-decoration: none;
color: #FFF;
}Explicando, coloquei um padding no UL para garantir que as bordas das LI fiquem com um espaçamento, adicionei bordas de topo nas LI para ficar com as separações, e adicionei line-height e vertical-align para garantir o alinhamento vertical o/
Espero ter ajudado!
Abraços!
Tiago,
Fiz um teste também alterando algumas outras propriedades, segue o LINK.
Espero ter ajudado!
Abraços!
Legal Luiz me ajudou sim, consegui fazer as linhas conforme o esperado, agora surgiu outra dúvida pretendo gerar aquele quadradinho à esquerda do "selecione a cidade" pra alinha-lo a esquerda da div "selecione cidade", tentei adicionar uma div com width e height 56px com float left e adicionei a div antes do inicio da div da seleção de cidade, porém quando o float left é adicionado o quadrado some... como pode ver:
jsfiddle.net/fitalr/g60yyq6u/2
Fala Tiago,
Alterei o código para assim:
.quadrado {
width: 60px;
height: 60px;
background-color: red;
float: left;
}
.cidades {
height: 60px;
box-sizing: border-box;
position: relative;
background-color: #900005;
color: #FFF;
cursor: pointer;
padding: 0 20px;
float: left;
}Acho que resolve o seu problema!
Espero ter ajudado!
Abraços!
Boa Tiago! agora sim. Valeu pela Aula! haha. Abraço