html - 带有显示 :inline-block but position is wrong 的 CSS ul li

Question

我有一个 ul。和 li 带有显示内联 block 。
在每个li中，我有一个图像，图像底部有一个div。
如果div有不同的行，lis的位置是不一样的

这是图像。

注意:我不使用那些图像。它只是为了测试:)

这是 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/>

这是 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/>

也许它很简单，但我感觉很糟糕 :)，所以我很头疼哈哈。伙计!

Answer 1

使用这个 .uldaftarartikel ul li{float:left}