How to move this horizontal?

Question

i'm having trouble with this code.I need to move those images horizontal... I don't know why they are placed vertical.

.almedio {
  display: flex;
  justify-content: center;
}

<div class="almedio">
       
  <ul>
      <li><a href="Paginas/Compra.html"></a></li>
      <li><a href="Paginas/NMW.html"><img src="https://orcz.com/images/thumb/b/bb/Need-for-speed-most-wanted-box-art.jpeg/200px-Need-for-speed-most-wanted-box-art.jpeg" alt="juego1"></a></li>
      <li><a href="Paginas/Gta5.html"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcROv2RDtFhiKina3NSOLkiauhtLwKahXCQPag&usqp=CAU" alt="juego2"></a></li>
      <li><a href="Paginas/Alice.html"><img src="https://1.bp.blogspot.com/-n3u_0Sao23c/VWQxGos9TYI/AAAAAAAAAns/GwtyYMIK03c/s1600/200px-AliceMadnessReturns.jpg" alt="juego3"></a></li>

  </ul>
        

</div>

try => `display:flex` on your `ul` ? – Always Helping Sep 27 '20 at 03:59 — Always Helping, Sep 27 '20 at 03:59

score 1 · Answer 1 · edited Sep 27 '20 at 04:03

Be sure you are styling the ul and li tags, not only the container.

.almedio {
width: 100%;
}
ul {
list-style: none;
}
li {
display: inline-block;
}

<div class="almedio">
       
        <ul>
            <li><a href="Paginas/Compra.html"></a></li>
            <li><a href="Paginas/NMW.html"><img src="https://orcz.com/images/thumb/b/bb/Need-for-speed-most-wanted-box-art.jpeg/200px-Need-for-speed-most-wanted-box-art.jpeg" alt="juego1"></a></li>
            <li><a href="Paginas/Gta5.html"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcROv2RDtFhiKina3NSOLkiauhtLwKahXCQPag&usqp=CAU" alt="juego2"></a></li>
            <li><a href="Paginas/Alice.html"><img src="https://1.bp.blogspot.com/-n3u_0Sao23c/VWQxGos9TYI/AAAAAAAAAns/GwtyYMIK03c/s1600/200px-AliceMadnessReturns.jpg" alt="juego3"></a></li>

        </ul>
        

    </div>

score 1 · Answer 2 · answered Sep 27 '20 at 04:39

you just need to add

 .almedio>ul{
          display: flex;
        }

.almedio{
      display: flex;
      justify-content: center;
    }
   .almedio>ul{
      display: flex;
    }
   .almedio>ul>li{
      padding:5px;
    }

<div class="almedio">
           
      <ul>
          <li><a href="Paginas/Compra.html"></a></li>
          <li><a href="Paginas/NMW.html"><img src="https://orcz.com/images/thumb/b/bb/Need-for-speed-most-wanted-box-art.jpeg/200px-Need-for-speed-most-wanted-box-art.jpeg" alt="juego1"></a></li>
          <li><a href="Paginas/Gta5.html"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcROv2RDtFhiKina3NSOLkiauhtLwKahXCQPag&usqp=CAU" alt="juego2"></a></li>
          <li><a href="Paginas/Alice.html"><img src="https://1.bp.blogspot.com/-n3u_0Sao23c/VWQxGos9TYI/AAAAAAAAAns/GwtyYMIK03c/s1600/200px-AliceMadnessReturns.jpg" alt="juego3"></a></li>
          <li><a href="Paginas/NMW.html"><img src="https://orcz.com/images/thumb/b/bb/Need-for-speed-most-wanted-box-art.jpeg/200px-Need-for-speed-most-wanted-box-art.jpeg" alt="juego1"></a></li>
          <li><a href="Paginas/Gta5.html"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcROv2RDtFhiKina3NSOLkiauhtLwKahXCQPag&usqp=CAU" alt="juego2"></a></li>
          <li><a href="Paginas/Alice.html"><img src="https://1.bp.blogspot.com/-n3u_0Sao23c/VWQxGos9TYI/AAAAAAAAAns/GwtyYMIK03c/s1600/200px-AliceMadnessReturns.jpg" alt="juego3"></a></li>

      </ul>
            

    </div>

score 0 · Answer 3 · answered Sep 27 '20 at 04:27

You can use css flex or grid -

/*.almedio {
  display: flex;
  justify-content: center;
}*/
.almedio ul{
padding:0;
margin:0;
display:flex;

overflow-X:scroll;
list-style-type:none;

}

.almedio ul li{
padding:2px 10px;
}

img{
height:100%
}

<div class="almedio">     
  <ul>
      <li><a href="Paginas/Compra.html"></a></li>
      <li><a href="Paginas/NMW.html"><img src="https://orcz.com/images/thumb/b/bb/Need-for-speed-most-wanted-box-art.jpeg/200px-Need-for-speed-most-wanted-box-art.jpeg" alt="juego1"></a></li>
      <li><a href="Paginas/Gta5.html"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcROv2RDtFhiKina3NSOLkiauhtLwKahXCQPag&usqp=CAU" alt="juego2"></a></li>
      <li><a href="Paginas/Alice.html"><img src="https://1.bp.blogspot.com/-n3u_0Sao23c/VWQxGos9TYI/AAAAAAAAAns/GwtyYMIK03c/s1600/200px-AliceMadnessReturns.jpg" alt="juego3"></a></li>
  </ul>
</div>

How to move this horizontal?

3 Answers3