我有搜到类似的东西 但是他给的代码不置中 这让我有点头疼
https://blog.csdn.net/dwb123456123456/article/details/83757485
这个是找来的文 但是我添加的越多他只往左边添加 我想说 动态控制每添加1
first-of-type*40 问题是这样不知道如何写 请大神给点建议
我有搜到类似的东西 但是他给的代码不置中 这让我有点头疼
https://blog.csdn.net/dwb123456123456/article/details/83757485
这个是找来的文 但是我添加的越多他只往左边添加 我想说 动态控制每添加1
first-of-type*40 问题是这样不知道如何写 请大神给点建议
用transform:translateX只能改变元素显示的位置,元素还是占据着在页面上原本所占的空间,这自然影响居中。
应该为图片设置负值的 margin 来实现头像叠加。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
#box {
background-color: #cfc;
font-size: 0px;
text-align: center;
}
#box img {
border-radius: 50%;
margin: 0px -15px;
}
</style>
</head>
<body>
<div id="box">
<img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
<img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
<img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
<img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
<img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
<img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
<img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
<img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
</div>
</body>
</html>