[英]CSS ul li with display:inline-block but position is wrong
I have an ul. 我有病。 and li s with display inline-block.
和li带有显示内联块。
In each li, i have an image, and a div in bottom the image. 在每个li中,我都有一个图像,图像底部有一个div。
The position of lis are not same if the divs have different row 如果div具有不同的行,则lis的位置不相同
Heres the image. 继承人的形象。
Note: I dont use that images. 注意:我不使用该图像。 its just for test :)
它只是为了测试:)
Heres the CSS 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 the HTML 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/>
Maybe its simple, but i feel badman :), so i got headache lol. 也许很简单,但是我觉得很坏:),所以我很头疼。 Ty man!
!
The correct answers are : 正确答案是:
1. .uldaftarartikel ul li{float:left} Ty @HirenPatel. 1. .uldaftarartikel ul li {float:left} Ty @HirenPatel。
2. .uldaftarartikel ul li{vertical-align:top} Ty @MrLister. 2. .uldaftarartikel ul li {vertical-align:top} Ty @MrLister。
Why cant i check their comment as answer? 我为什么不能查看他们的评论作为答案? Im sorry im new in the forum :)
对不起,我在论坛上是新来的:)
And noob in css hahahaha 还有css中的菜鸟哈哈哈哈
使用此.uldaftarartikel ul li {float:left}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.