Horizontal line in the middle of an unordered HTML list

Asked

Viewed 60,168 times

3

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

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

Any hint?

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>
html css
  • 1

    Avoid making big titles...

  • I do this kind of thing very often in menus...it’s simpler than it looks, I’ll provide you with a very practical example.

3 answers

6

<hr> son of <ul>

Chrome correctly shows a row between the list items. 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 obtained was:

inserir a descrição da imagem aqui

<hr> within a <li>

An alternative is to place the line inside an item and remove the item’s formatting. Example:

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

Edge on a <li>

A third approach is to place an upper or lower edge on the list items. 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.

2

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

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>

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

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.