Problems with **UL inline**

Question

Good,

I have a problem making one ul inline thus because every time I try to hr and vertical-align always comes out of place.

This is the result you give 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><a href="#"><h4>Escritórios</h4> <img src="http://culturalis.pt/wp-content/uploads/2015/06/bolinha.png"/><hr></hr></a></li>

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

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

</ul>

Answer 1

You have misspelled the attributes of hr.

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

Is wrong the with and inline block, correct is:

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

And change the h4 for 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><a href="#"><span class="textoMaior">Escritórios</span> <img src="http://culturalis.pt/wp-content/uploads/2015/06/bolinha.png"/><hr></hr></a></li>

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

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

</ul>