2

Boas,

Eu tenho um problema em fazer um ul inline assim pois sempre que tento por hr e vertical-align sai sempre do sitio.

Este é o resultado que me dá:

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>

1 Resposta 1

4

Você digitou errado os atributos do hr.

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

Está errado o with e inline block, correto é:

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

E troque o h4 por span e atribua o seletor da sua preferência.

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>

8
  • Mesmo assim não sei como é que dá aquele espaçamento todo entre o <h4> e a imagem. Commented 22/06/2015 às 16:42
  • 1
    @BrunoGibellino Atualizei minha resposta com sua necessidade. Commented 22/06/2015 às 16:49
  • obrigado, mesmo isso que precisava. Mas com o background-color e com o color não dá para mudar a cor do hr. Será que estou a fazer bem? Commented 22/06/2015 às 16:55
  • 1
    @BrunoGibellino Utilizei border-color ao invés de color Commented 22/06/2015 às 16:59
  • 1
    Verifica se não tem outro elemento ou seletor dando conflito Commented 22/06/2015 às 17:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .