我的无序列表对齐有问题。我希望保持对齐我的无序列表,但仍然保持父母div的居中对齐。
.images img {
width: 290px;
}
.images ul {
padding: 0px;
margin: 0px;
}
.images li {
list-style: none;
display: inline-block;
padding: 13px;
}
.images {
padding: 40px 0;
text-align: center;
}
.images span {
text-decoration: line-through;
opacity: 0.5;
}
<div class="images">
<div class="container">
<ul>
<li>
<div class="fake-you-white-cap">
<a href="/product_page?id=35"><img src="/includes/pictures/fake-you-white-cap.jpg" alt="Fake You White Cap">
<div class="overlay2">
<h6>Fake You White Cap</h6>
<p>Rp 130.000</p>
</div>
</a>
</div>
</li>
<li>
<div class="play-hard">
<a href="/product_page?id=34"><img src="/includes/pictures/play-hard.jpg" alt="Play Hard Snapback">
<div class="overlay2">
<h6>Play Hard Snapback</h6>
<p>Rp 130.000</p>
</div>
</a>
</div>
</li>
<li>
<div class="doge-white">
<a href="/product_page?id=33"><img src="/includes/pictures/doge-white.jpg" alt="Doge White Cap">
<div class="overlay2">
<h6>Doge White Cap</h6>
<p>Rp 130.000</p>
</div>
</a>
</div>
</li>
<li>
<div class="fake-you-navy-cap">
<a href="/product_page?id=36"><img src="/includes/pictures/fake-you-navy-cap.jpg" alt="Fake You Navy Cap">
<div class="overlay2">
<h6>Fake You Navy Cap</h6>
<p>Out of Stock</p>
</div>
</a>
</div>
</li>
<li>
<div class="doge-black">
<a href="/product_page?id=32"><img src="/includes/pictures/doge-black.jpg" alt="Doge Black Cap">
<div class="overlay2">
<h6>Doge Black Cap</h6>
<p>Out of Stock</p>
</div>
</a>
</div>
</li>
<li>
<div class="weirdo-pink">
<a href="/product_page?id=14"><img src="/includes/pictures/weirdo-pink.jpg" alt="Weirdo Pink Cap">
<div class="overlay2">
<h6>Weirdo Pink Cap</h6>
<p>Out of Stock</p>
</div>
</a>
</div>
</li>
<li>
<div class="weirdo-black">
<a href="/product_page?id=13"><img src="/includes/pictures/weirdo-black.jpg" alt="Weirdo Black Cap">
<div class="overlay2">
<h6>Weirdo Black Cap</h6>
<p>Out of Stock</p>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
答案 0 :(得分:1)
这是你想要的吗?只需将css属性text-align:left;
添加到#images li{}
答案 1 :(得分:0)
你的意思是这样吗?
.images img {
width: 290px;
}
.images ul {
padding: 0px;
margin: 0px;
}
.images li {
list-style: none;
display: inline-block;
padding: 13px;
text-align: left;
}
.images {
padding: 40px 0;
text-align: center;
}
.images span {
text-decoration: line-through;
opacity: 0.5;
}
<div class="images">
<div class="container">
<ul>
<li>
<div class="fake-you-white-cap">
<a href="/product_page?id=35"><img src="/includes/pictures/fake-you-white-cap.jpg" alt="Fake You White Cap">
<div class="overlay2">
<h6>Fake You White Cap</h6>
<p>Rp 130.000</p>
</div>
</a>
</div>
</li>
<li>
<div class="play-hard">
<a href="/product_page?id=34"><img src="/includes/pictures/play-hard.jpg" alt="Play Hard Snapback">
<div class="overlay2">
<h6>Play Hard Snapback</h6>
<p>Rp 130.000</p>
</div>
</a>
</div>
</li>
<li>
<div class="doge-white">
<a href="/product_page?id=33"><img src="/includes/pictures/doge-white.jpg" alt="Doge White Cap">
<div class="overlay2">
<h6>Doge White Cap</h6>
<p>Rp 130.000</p>
</div>
</a>
</div>
</li>
<li>
<div class="fake-you-navy-cap">
<a href="/product_page?id=36"><img src="/includes/pictures/fake-you-navy-cap.jpg" alt="Fake You Navy Cap">
<div class="overlay2">
<h6>Fake You Navy Cap</h6>
<p>Out of Stock</p>
</div>
</a>
</div>
</li>
<li>
<div class="doge-black">
<a href="/product_page?id=32"><img src="/includes/pictures/doge-black.jpg" alt="Doge Black Cap">
<div class="overlay2">
<h6>Doge Black Cap</h6>
<p>Out of Stock</p>
</div>
</a>
</div>
</li>
<li>
<div class="weirdo-pink">
<a href="/product_page?id=14"><img src="/includes/pictures/weirdo-pink.jpg" alt="Weirdo Pink Cap">
<div class="overlay2">
<h6>Weirdo Pink Cap</h6>
<p>Out of Stock</p>
</div>
</a>
</div>
</li>
<li>
<div class="weirdo-black">
<a href="/product_page?id=13"><img src="/includes/pictures/weirdo-black.jpg" alt="Weirdo Black Cap">
<div class="overlay2">
<h6>Weirdo Black Cap</h6>
<p>Out of Stock</p>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
答案 2 :(得分:0)
ul {
width: 70%;
margin: auto;}
如果你已经改变了它们的显示属性,或者做了一些覆盖正常对齐规则的事情(例如浮动它们),那么这将不起作用。