/ *图标区* /
.social {
margin-top: px;
padding: 0;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%,-50%);
}
.social li {
list-style: none;
float: left;
margin: 0px;
width: 60px;
height: 10px;
line-height: 60px;
text-align: center;
background: #;
border-radius: 50%;
font-size: 50px;
position: ;
transition: .5s ease-in-out;
color: #004d26;
z-index: 1;
}
.social li:before {
content: '';
width: 100%;
height: 100%;
position: ;
top: 0;
left: 0;
background: #ff003b;
border-radius: 50%;
transform: scale(0);
transition: .5s ease-in-out;
z-index: -1;
}
.social li:hover:before {
transform: scale(.9);
}
.social li:hover {
color: #979FA8;
}
大家好。因此,我遇到了一个问题,如果我单击并按住网页底部并决定拉起屏幕,将屏幕最小化,那么字体真棒图标就会随之移动。我想让我的图标完全停留在它们原来的位置,并且完全不动。感谢您的帮助!如果我以某种方式重复某人的问题,我表示歉意。我一直找不到解决方案。
最佳答案
欢迎使用HTML和CSS! MDN是最好的学习场所。
这是edited code,它以您想要的方式(并非真正理想的方式)起作用(我相信)。
我删除了元素的绝对位置。由于您只想将元素居中对齐,因此我使用了text-align:center;
如果要固定其父元素(相对定位的元素),请使用绝对定位。
更改了.social类的样式
.social {
text-align: center;
}
并在选择器
display: inline-block;
下添加了float: left;
而不是.social li
.social li {
display: inline-block;
}
快乐的编码。
附言您可以使用已经建立的bootstrap模板来制作关于我的页面。
关于html - 缩小页面时,“超赞字体”图标移动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49022934/