我希望第一行3张图像,第二行3张图像,并希望它们在页面中间
* { box-sizing: border-box; }
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center; }
li { display: inline-block; padding: 10px;}
li:nth-child(1), li:nth-child(4) {
width: 50%;
}
li:nth-child(4) { text-align: right; }
li:nth-child(2) { text-align: left; }
<ul>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
</ul>
答案 0 :(得分:4)
有很多方法可以做到这一点,例如:
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
https://jsfiddle.net/d6wn79pv/4/
或
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
text-align: center;
}
ul li {
flex-grow: 1;
width: 33%;
}
答案 1 :(得分:1)
使用 flexbox :
* {
box-sizing: border-box;
}
ul {
list-style: none;
padding: 0;
display: flex;
justify-content:center;
flex-wrap: wrap;
}
li{
width:30%;
margin:3px auto;
}
<ul>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
</ul>
答案 2 :(得分:0)
检查一下。
<!DOCTYPE html>
<html>
<style>
* { box-sizing: border-box; }
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center; }
li {
width: 31%;
display:block;
float:left;
margin:3px;
}
</style>
<body>
<ul>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
</ul>
</body>
</html>
答案 3 :(得分:0)
您只需使用flex即可完成
<ul class="here">
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
</ul>
.here{
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.here li {
width: 32%;
}
.here li img{
width: 100%;
}
更改.here
width
以自动调整内容大小