3

Tenho uma lista não ordenada que possui alguns itens de lista e gostaria de colocar uma linha horizontal (horizontal rule < hr >) nela, bem no meio, com altura de 2px. Eu tentei botar vertical-align: middle mas a linha ficou em cima dos itens de lista. Eu gostaria de botar ela atrás deles, deve ter alguma propriedade do css que permita isso.

Os itens de lista podem aparecer ou não, dependendo de outros fatores. Ou seja, havendo ou não itens de lista, a linha horizontal deve sempre estar no meio da div.

Alguma dica?

Segue o código que tenho.

<ul>
    <hr style="height:2px; border:none; color:#000; background-color:#000; margin-top: 0px; margin-bottom: 0px;">
    <? if($primeiro_ponto != NULL && $ultimo_ponto != NULL && $quantidade_de_trajetos>0){foreach($conteudos as $ils){ echo $ils; }}?>       
</ul>
2
  • 1
    Evite fazer títulos grandes... Commented 2/04/2014 às 18:18
  • faço esse tipo de coisa com muita frequÊncia em menus...é mais simples do que parece, vou lhe fornecer um exemplo bem prático.
    – Leandro RR
    Commented 2/04/2014 às 20:47

3 Respostas 3

6

<hr> filho de <ul>

O Chrome mostra corretamente uma linha entre os itens da lista. Usei o seguinte código para teste:

<ul>
    <li>Item 1</li>
    <hr style="height:2px; border:none; color:#000; background-color:#000; margin-top: 0px; margin-bottom: 0px;"/>
     <li>Item 2</li>
</ul>

O resultado obtido foi:

inserir a descrição da imagem aqui

<hr> dentro de um <li>

Outra alternativo é colocar a linha dentro de um item e remover a formatação do item. Exemplo:

<ul>
    <li>Item 1</li>
    <li style="list-style-type: none;"><hr style="height:2px; border:none; color:#000; background-color:#000; margin-top: 0px; margin-bottom: 0px;"/></li>
     <li>Item 2</li>
</ul>

Borda em um <li>

Uma terceira abordagem é colocar uma borda superior ou inferior nos itens da lista. Exemplo:

<ul>
    <li>Item 1</li>
     <li style="border-top: 2px #000 solid; margin-top: 0px; margin-bottom: 0px;">Item 2</li>
</ul>

Demo no jsfiddle

Observação: evite usar CSS inline, isto é, misturado com HTML. Dê preferência para usar um arquivo CSS separado.

2

faça uma li com uma classe "separador" veja no exemplo:

http://jsfiddle.net/A4Lj7/1

HTML:

<ul>
    <li>maçã</li>
    <li class="separador"></li>
    <li>banana</li>
    <li class="separador"></li>
    <li>laranja</li>
</ul>

CSS:

ul li.separador {
    width: 90%; /* coloque aqui a largura da linha */
    border-top: 1px solid #000;
    list-style-type: none;
}
1

<hr>

no css3 apenas coloque essa tag e ele fara uma linha na horizontal

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .