Problems with ** UL inline **

Navigation
2

Good,

I have a problem making a ul inline so since whenever I try for hr and vertical-align always leaves the site.

This is the result that gives me: 

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline;
    padding-left: 20px;
}

a {
text-decoration:none;
color:#000000;
}

a:hover{
 color:#3ba09e;
}
   hr{
width:20px;
display:inline-block;
vertical-align:middle;
}
<ul>

<li><a href="#"><h4>Arquivo<h4/> <img src="http://culturalis.pt/wp-content/uploads/2015/06/bolinha.png"/><hr></hr></a></li><li><ahref="#"><h4>Escritórios</h4> <img src="http://culturalis.pt/wp-content/uploads/2015/06/bolinha.png"/><hr></hr></a></li><li><ahref="#"><h4>Escolas</h4> <img src="http://culturalis.pt/wp-content/uploads/2015/06/bolinha.png"/><hr></hr></a></li><li><ahref="#"><h4>Outros</h4> <img src="http://culturalis.pt/wp-content/uploads/2015/06/bolinha.png"/><hr></hr></a></li>

</ul>
    
asked by anonymous 22.06.2015 / 18:16

1 answer

4

You entered the wrong attributes of hr . 

hr{
    with:20px;
    display:inline block;
    vertical-align:middle;
}

The with and inline block is wrong, correct is: 

hr{
    width:20px;
    display:inline-block;
    vertical-align:middle;
}

And change the h4 by span and assign the selector of your choice. 

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline;
    padding-left: 20px;
}

a {
text-decoration:none;
color:#000000;
}

a:hover{
 color:#3ba09e;
}
   hr{
     width:20px;
     display:inline-block;
     vertical-align:middle;
     border: 1px solid red;
}

.textoMaior {
     font-size: 18px;
     font-weight: bold;
}
<ul>

<li><a href="#"><span class="textoMaior">Arquivo</span> <img src="http://culturalis.pt/wp-content/uploads/2015/06/bolinha.png"/><hr></hr></a></li><li><ahref="#"><span class="textoMaior">Escritórios</span> <img src="http://culturalis.pt/wp-content/uploads/2015/06/bolinha.png"/><hr></hr></a></li><li><ahref="#"><span class="textoMaior">Escolas</span> <img src="http://culturalis.pt/wp-content/uploads/2015/06/bolinha.png"/><hr></hr></a></li><li><ahref="#"><span class="textoMaior">Outros</span> <img src="http://culturalis.pt/wp-content/uploads/2015/06/bolinha.png"/><hr></hr></a></li>

</ul>
    
22.06.2015 / 18:23
V9 (VBA) - IntraGroup Sales Documents Query on a column with different values