CSS ul li avec affichage: inline-block mais la position est fausse

Question

J'ai un ul. et li s avec display inline-block.
Dans chaque li, j'ai une image, et un div en bas de l'image.
La position de lis n'est pas la même si les divs ont une ligne différente

Voici l'image.

Remarque: Je n'utilise pas ces images. son juste pour le test :)

Heres le code CSS:

.uldaftarartikel ul{<br/> 
    list-style-type: none;margin: 0 auto;padding: 0;text-align:center;<br/> 
}<br/> 
.uldaftarartikel ul li{<br/> 
    display: inline-block; margin:7px;width: 170px;height: 272px;<br/> 
}<br/> 
@media (min-width: 700px) and (max-width: 1299px){<br/> 
    .uldaftarartikel ul li{width: 200px;}<br/> 
}<br/> 
@media (min-width: 1300px){<br/> 
    .uldaftarartikel ul li{width: 227px;}<br/> 
}<br/> 
.uldaftarartikel ul li a{<br/> 
    display: block;text-decoration: none;height: 272px;<br/> 
}<br/> 
.uldaftarartikel ul li a:hover{<br/> 
    text-decoration: none;<br/> 
}<br/> 

.uldaftarartikel ul li a .gambarartikelchange{<br/> 
    background-color: transparent;<br/> 
}<br/> 
.uldaftarartikel ul li a .gambarartikelchange:hover{<br/> 
    background: rgb(255,241,103);<br/> 
}<br/> 
.uldaftarartikel ul li a .gambarartikelchange img{<br/> 
    width: 100%;height: auto;opacity:1;transition:opacity 1.5s;height: 112px;<br/>-webkit-backface-visibility: hidden;-ms-transform: translateZ(0); /* IE 9 */ 
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */transform: translateZ(0);<br/> 
}<br/> 
.uldaftarartikel ul li a .gambarartikelchange img:hover{<br/> 
    opacity: 0.4;<br/> 
}<br/> 
.uldaftarartikel ul li a .keterangandaftarartikel{<br/> 
    color: rgb(127,71,51);transition:color 1.5s;height: 150px;padding:5px;<br/> 
}<br/> 
.uldaftarartikel ul li a .keterangandaftarartikel:hover{<br/> 
    color:rgb(204,88,47);<br/> 
}<br/> 

Heres le code HTML:

<div class="uldaftarartikel"><br/> 
<ul><br/> 
    <li><a href="#"><div class="gambarartikelchange"><img src="gambarartikel/1.jpg" ></div><div class="keterangandaftarartikel">fqwgegg<br/>asfagdg</div></a></li><br/> 
    <li><a href="#"><div class="gambarartikelchange"><img src="gambarartikel/2.jpg" ></div><div class="keterangandaftarartikel">3yrehdfh</div></a></li><br/> 
    <li><a href="#"><div class="gambarartikelchange"><img src="gambarartikel/3.jpg" ></div><div class="keterangandaftarartikel">hshfdh5fdhj</div></a></li><br/> 
    <li><a href="#"><div class="gambarartikelchange"><img src="gambarartikel/4.jpg" ></div><div class="keterangandaftarartikel">4yhuredhdt</div></a></li><br/> 
    <li><a href="#"><div class="gambarartikelchange"><img src="gambarartikel/1.jpg" ></div><div class="keterangandaftarartikel">fqwgegg</div></a></li><br/> 
    <li><a href="#"><div class="gambarartikelchange"><img src="gambarartikel/2.jpg" ></div><div class="keterangandaftarartikel">3yrehdfh</div></a></li><br/> 
    <li><a href="#"><div class="gambarartikelchange"><img src="gambarartikel/3.jpg" ></div><div class="keterangandaftarartikel">hshfdh5fdhj</div></a></li><br/> 
    <li><a href="#"><div class="gambarartikelchange"><img src="gambarartikel/4.jpg" ></div><div class="keterangandaftarartikel">4yhuredhdt</div></a></li><br/> 
</ul><br/> 
</div><br/> 

Peut-être que son simple, mais je me sens Badman :), donc j'ai mal à la tête lol. Ty l'homme!

Answer 1

Utilisez cette .uldaftarartikel ul li {float: left}

Answer 2

Les bonnes réponses sont:
1. .uldaftarartikel ul li {float: left} Ty @HirenPatel.
2. .uldaftarartikel ul li {vertical-align: top} Ty @MrLister. Pourquoi ne puis-je pas vérifier leur commentaire en tant que réponse? Je suis désolé im nouveau dans le forum :)
Et Noob dans hahahaha css