CSS ul li with display：inline-block but position is wrong

我有一个ul。并显示内嵌块。
在每个李，我有一个图像，并在图像底部的div。
如果div具有不同的行，则lis的位置不相同

继承此图像。

注意：我不使用该图像。它只是用于测试:)
CSS ul li with display：inline-block but position is wrong

继承人的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/>

也许它的简单，但我觉得白德曼:)所以我头痛哈哈。 Ty男人！

来源

2017-10-18 cheyong

添加实际的代码，而不是图像。 –

使用ul li {float：left;} – Gattbha

Ty man ..答案是ul li {float：left} @HirenPatel。 Ty男人.. – cheyong

使用此.uldaftarartikel UL李{浮动：左}

来源

2017-10-18 18:34:56 Gattbha

正确答案是：
1. .uldaftarartikel ul li {float：left} Ty @HirenPatel。
2. .uldaftarartikel ul li {vertical-align：top} Ty @MrLister。

为什么不能检查他们的评论作为答案？在论坛:)
而小白对不起即时通讯新在CSS哈哈哈哈

来源

2017-10-18 08:16:29 cheyong

添加评论作为答案，所以你可以检查答案，我添加答案作为评论因为你没有添加实际的HTML和CSS代码时，我添加评论 – Gattbha

CSS ul li with display：inline-block but position is wrong

回答

相关问题