Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Dificuldade estilização de uma lista

Olá, queria gostaria de ter o seguinte resultado:

Capturar

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

5 respostas

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

solução!

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