我正在尝试修复此右上角,这意味着在滚动,最大化和最小化窗口时,它会保持右上角。立场:绝对的;绝对的顶:0;对:0; .....我无法正常工作。您可以提供语法帮助吗?
<div align="center" class="socialbtns">
<ul>
<li><a href="http://…..” target="_blank" class="fa fa-lg fa-linkedin"></a>
</li>
<li><a href="https://......target="_blank" class="fa fa-lg fa-facebook"></a>
</li>
<li><a href="http://…..” target="_blank" class="fa fa-lg fa-twitter"></a></li>
<li><a href="https://….” target="_blank" class="fa fa-lg fa-google-plus"></a>
</li>
</ul>
</div>
CSS如下
@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
a, a:hover {
text-decoration: none;
}
.socialbtns, .socialbtns ul, .socialbtns li {
margin: 0;
padding: 5px;
}
.socialbtns li {
list-style: none outside none;
display: inline-block;
}
.socialbtns .fa {
width: 40px;
height: 28px;
color: #576267;
background-color: transparent;
border: 1px solid #000;
padding-top: 12px;
border-radius: 22px;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
-o-border-radius: 22px;
}
.socialbtns .fa:hover {
color: #FFF;
background-color: #576267;
border: 1px solid #000;
}
</style>
最佳答案
您的锚标记未很好地组合在一起,并使用CSS position:absolute .class .socialbtns的right和top设置为0的absolute。
运行下面的代码片段以查看其工作原理
.socialbtns {
position: absolute;
right: 0;
top: 0;
margin-right: 15px;
}
li {
list-style: none;
display: inline;
margin: 5px;
}
a {text-decoration: none;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="socialbtns">
<ul>
<li><a href="http://….." target="_blank" class="fa fa-lg fa-linkedin"></a></li>
<li><a href="https://..." target="_blank" class="fa fa-lg fa-facebook"></a></li>
<li><a href="http://…" target="_blank" class="fa fa-lg fa-twitter"></a></li>
<li><a href="https://…." target="_blank" class="fa fa-lg fa-google-plus"></a></li>
</ul>
</div>