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>