3-10 怎么不是两端对齐呢？
来源：3-10 编程练习
weixinapp_慕粉007
2018-06-26 16:13:56
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style: none;
background-color: orange;
margin: 0;
padding: 0;
height: 150px;
width: 390px;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
li {
font-size: 24px;
width: 100px;
background-color: pink;
margin: 10px;
}
</style>
</head>
<body>
<ul>
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
<li>第四个li</li>
<li>第五个li</li>
<li>第六个li</li>
</ul>
</body>
</html>写回答
2回答
-
好帮手慕星星
2018-06-26
在ul中添加justify-content属性，
你给li设置的是四个方向的margin值，所以不会挨边，设置上下方向的就可以了，参考：
自己完善测试下，祝学习愉快~~
1h018-10-01 -
Alicia_
2018-10-01
align-content设置成space-around,justify设置成space-between
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ul { list-style: none; background-color: orange; margin: 0; padding: 0; height: 150px; width: 390px; display:flex; flex-wrap:wrap; align-content:space-around; justify-content:space-between; } li { font-size: 24px; width: 100px; height:30px; background-color: pink; margin:15px; } li:first-child{ margin-left:0; } li:nth-child(4){ margin-left:0; } li:nth-child(3){ margin-right:0; } li:nth-child(6){ margin-right:0; } </style> </head> <body> <ul> <li>第一个li</li> <li>第二个li</li> <li>第三个li</li> <li>第四个li</li> <li>第五个li</li> <li>第六个li</li> </ul> </body> </html>0
相似问题