मेरे पास एक उल है। और प्रदर्शन इनलाइन-ब्लॉक के साथ।
प्रत्येक ली में, मेरे पास एक छवि है, और छवि के नीचे एक div है।
लिस की स्थिति समान नहीं है यदि divs की अलग पंक्ति है

यह रही छवि।
a
नोट: मैं उन छवियों का उपयोग नहीं करता हूं। यह सिर्फ परीक्षण के लिए है :)

ये रहा सीएसएस कोड:

.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/>



एचटीएमएल कोड यह रहा:

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

शायद यह आसान है, लेकिन मुझे बुरा लगता है :), इसलिए मुझे सिरदर्द हो गया। टाइ यार!

0
cheyong 18 अक्टूबर 2017, 06:25

2 जवाब

सबसे बढ़िया उत्तर

इस .uldaftarartikel ul li{float:left} का प्रयोग करें

0
Hiren Vaghasiya 18 अक्टूबर 2017, 21:34

सही उत्तर हैं :
1. .uldaftarartikel ul li{float:left} Ty @HirenPatel.
2. .uldaftarartikel ul li{vertical-align:top} Ty @MrLister।

मैं उनकी टिप्पणी को उत्तर के रूप में क्यों नहीं देख सकता? आई एम सॉरी मैं फोरम में नया हूँ :)
और सीएसएस hahahaha . में नोब

0
cheyong 18 अक्टूबर 2017, 11:16