title: CSS ul li with display:inline-block but position is wrong
body: <p>I have an ul. and li s with display inline-block.<br/>
  In each li, i have an image, and a div in bottom the image.<br/>The position of lis are not same if the divs have different row <br/><br/>
  Heres the image.<br/>
  <img src="https://i.stack.imgur.com/ClPQv.png" alt="a">
  <br/>Note: I dont use that images. its just for test :)<br/></p>
  
  <p>Heres the CSS code:<br/></p>
  
  <pre><code>.uldaftarartikel ul{&lt;br/&gt;
      list-style-type: none;margin: 0 auto;padding: 0;text-align:center;&lt;br/&gt;
  }&lt;br/&gt;
  .uldaftarartikel ul li{&lt;br/&gt;
      display: inline-block; margin:7px;width: 170px;height: 272px;&lt;br/&gt;
  }&lt;br/&gt;
  @media (min-width: 700px) and (max-width: 1299px){&lt;br/&gt;
      .uldaftarartikel ul li{width: 200px;}&lt;br/&gt;
  }&lt;br/&gt;
  @media (min-width: 1300px){&lt;br/&gt;
      .uldaftarartikel ul li{width: 227px;}&lt;br/&gt;
  }&lt;br/&gt;
  .uldaftarartikel ul li a{&lt;br/&gt;
      display: block;text-decoration: none;height: 272px;&lt;br/&gt;
  }&lt;br/&gt;
  .uldaftarartikel ul li a:hover{&lt;br/&gt;
      text-decoration: none;&lt;br/&gt;
  }&lt;br/&gt;
  
  .uldaftarartikel ul li a .gambarartikelchange{&lt;br/&gt;
      background-color: transparent;&lt;br/&gt;
  }&lt;br/&gt;
  .uldaftarartikel ul li a .gambarartikelchange:hover{&lt;br/&gt;
      background: rgb(255,241,103);&lt;br/&gt;
  }&lt;br/&gt;
  .uldaftarartikel ul li a .gambarartikelchange img{&lt;br/&gt;
      width: 100%;height: auto;opacity:1;transition:opacity 1.5s;height: 112px;&lt;br/&gt;-webkit-backface-visibility: hidden;-ms-transform: translateZ(0); /* IE 9 */
      -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */transform: translateZ(0);&lt;br/&gt;
  }&lt;br/&gt;
  .uldaftarartikel ul li a .gambarartikelchange img:hover{&lt;br/&gt;
      opacity: 0.4;&lt;br/&gt;
  }&lt;br/&gt;
  .uldaftarartikel ul li a .keterangandaftarartikel{&lt;br/&gt;
      color: rgb(127,71,51);transition:color 1.5s;height: 150px;padding:5px;&lt;br/&gt;
  }&lt;br/&gt;
  .uldaftarartikel ul li a .keterangandaftarartikel:hover{&lt;br/&gt;
      color:rgb(204,88,47);&lt;br/&gt;
  }&lt;br/&gt;
  </code></pre>
  
  <p><br/><br/>Heres the HTML code:<br/></p>
  
  <pre><code>&lt;div class="uldaftarartikel"&gt;&lt;br/&gt;
  &lt;ul&gt;&lt;br/&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;div class="gambarartikelchange"&gt;&lt;img src="gambarartikel/1.jpg" &gt;&lt;/div&gt;&lt;div class="keterangandaftarartikel"&gt;fqwgegg&lt;br/&gt;asfagdg&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;br/&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;div class="gambarartikelchange"&gt;&lt;img src="gambarartikel/2.jpg" &gt;&lt;/div&gt;&lt;div class="keterangandaftarartikel"&gt;3yrehdfh&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;br/&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;div class="gambarartikelchange"&gt;&lt;img src="gambarartikel/3.jpg" &gt;&lt;/div&gt;&lt;div class="keterangandaftarartikel"&gt;hshfdh5fdhj&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;br/&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;div class="gambarartikelchange"&gt;&lt;img src="gambarartikel/4.jpg" &gt;&lt;/div&gt;&lt;div class="keterangandaftarartikel"&gt;4yhuredhdt&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;br/&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;div class="gambarartikelchange"&gt;&lt;img src="gambarartikel/1.jpg" &gt;&lt;/div&gt;&lt;div class="keterangandaftarartikel"&gt;fqwgegg&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;br/&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;div class="gambarartikelchange"&gt;&lt;img src="gambarartikel/2.jpg" &gt;&lt;/div&gt;&lt;div class="keterangandaftarartikel"&gt;3yrehdfh&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;br/&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;div class="gambarartikelchange"&gt;&lt;img src="gambarartikel/3.jpg" &gt;&lt;/div&gt;&lt;div class="keterangandaftarartikel"&gt;hshfdh5fdhj&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;br/&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;div class="gambarartikelchange"&gt;&lt;img src="gambarartikel/4.jpg" &gt;&lt;/div&gt;&lt;div class="keterangandaftarartikel"&gt;4yhuredhdt&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;br/&gt;
  &lt;/ul&gt;&lt;br/&gt;
  &lt;/div&gt;&lt;br/&gt;
  </code></pre>
  
  <p>Maybe its simple, but i feel badman :), so i got headache lol. Ty man! </p>