如何解决宽度不起作用-html元素的尺寸过大
我建立了一个图标栏,但是没有用方框来调整图标的大小。我尝试宽度:max-width
:还是什么都没关系。因此,现在移动时无法使用图标栏下的html元素。
感谢您的帮助!
.icon-bar {
width: 10px;
height: auto;
background-color: orange;
position: fixed;
margin-left: auto;
z-index: 99;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
outline: none;
}
.icon-bar a {
max-width: 20px;
display: block;
text-align: left;
padding: 9px;
transition: all 0.3s ease;
color: #FF7500;
font-size: 20px;
}
.icon-bar a:hover {
color: #78acaa;
}
The picture shows the too large box size (background is coloured because of visualisation)
HTML代码是这样:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-bar">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="snapchat"><i class="fa fa-snapchat"></i></a>
<a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。