Horizontal line in the middle of an unordered HTML list

Navigation
3

I have an unordered list that has some list items, and I would like to put a horizontal line (horizontal rule < hr >) in it, right in the middle, with a height of 2px. I tried to vertical-align: middle but the line stayed on top of the list items. I'd like to put it behind them, it must have some css property that allows that.

List items may or may not appear depending on other factors. That is, with or without list items, the horizontal line should always be in the middle of the div.

Any tips?

Follow the code I have. 

<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>
    
asked by anonymous 02.04.2014 / 19:50

3 answers

6

<hr> child <ul>

Chrome correctly shows a line between items in the list. I used the following code for testing: 

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

The result was:

<hr>within<li>

Anotheralternativeistoplacethelineinsideanitemandremovetheformattingoftheitem.Example:

<ul><li>Item1</li><listyle="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>

Edge in a <li>

A third approach is to place an upper or lower border on items in the list. Example: 

<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

Note: Avoid using CSS inline , that is, mixed with HTML. Prefer to use a separate CSS file.

    
02.04.2014 / 20:29
2

do a li with a class "separator" see in the example:

link

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;
}
    
02.04.2014 / 22:50
1

<hr>

In css3 just put this tag and it will make a horizontal line

    
19.08.2016 / 19:48
Get ID immediately after insertion Problem with exercise of C