导航栏图标将标记从超链接中分离出来

Question

我正试图创建一个带有a标签和图标的导航栏，但由于某种原因，它们之间存在分离，a标签背景不在图标的正后方。以下是我的意思：https://gyazo.com/986c59e17f031ce0b94547af6bceebac这是我当前的导航栏html和css：

.nav a {
float: right;
display: block;
margin-right: 10px;
background-color: black;
text-align: center;
line-height: 50px;
text-decoration: none;
padding: 3px;
height: 10px;
width: 10px;
}
.nav a:hover:not(.active) {
background-color: grey;
border-radius: 20px;
}
.nav a:not(.active) {
color: white;
border-radius: 20px;
}
.active {
background-color: yellow;
border-radius: 20px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="nav">
<a href="#"><i class="fa fa-fw fa-align-justify"></i></a>
<a href="#"><i class="fa fa-fw fa-wifi"></i></a>
<a href="#"><i class="fa fa-fw fa-user"></i></a>
<a class="active" href="#"><i class="fa fa-fw fa-gear"></i></a>
</div>

如何修复此问题以使a标记和图标对齐？

Answer 1

您必须删除链接<a>上的line-height和size，如下所示：

.nav a {
float: right;
display: block;
margin-right: 10px;
background-color: black;
text-align: center;
text-decoration: none;
padding: 3px;
}
.nav a:hover:not(.active) {
background-color: grey;
border-radius: 20px;
}
.nav a:not(.active) {
color: white;
border-radius: 20px;
}
.active {
background-color: yellow;
border-radius: 20px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="nav">
<a href="#"><i class="fa fa-fw fa-align-justify"></i></a>
<a href="#"><i class="fa fa-fw fa-wifi"></i></a>
<a href="#"><i class="fa fa-fw fa-user"></i></a>
<a class="active" href="#"><i class="fa fa-fw fa-gear"></i></a>
</div>

Answer 2

删除a标签的高度和宽度属性，并在图标上设置填充

.nav a {
float: right;
display: block;
margin-right: 10px;
background-color: black;
text-align: center;
/* line-height: 50px; */
text-decoration: none;
/*
padding: 3px;
height: 10px;
width: 10px;
*/
}
i {
padding: 3px;
}
.nav a:hover:not(.active) {
background-color: grey;
border-radius: 20px;
}
.nav a:not(.active) {
color: white;
border-radius: 20px;
}
.active {
background-color: yellow;
border-radius: 20px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="nav">
<a href="#"><i class="fa fa-fw fa-align-justify"></i></a>
<a href="#"><i class="fa fa-fw fa-wifi"></i></a>
<a href="#"><i class="fa fa-fw fa-user"></i></a>
<a class="active" href="#"><i class="fa fa-fw fa-gear"></i></a>
</div>

Answer 3

您可以使用flexbox属性轻松实现此布局，如下所示：

.nav a {
float: right;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-right: 10px;
background-color: black;
text-decoration: none;
padding: 3px;
height: 15px;
width: 15px;
}
.nav a:hover:not(.active) {
background-color: grey;
border-radius: 20px;
}
.nav a:not(.active) {
color: white;
border-radius: 20px;
}
.active {
background-color: yellow;
border-radius: 20px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="nav">
<a href="#"><i class="fa fa-fw fa-align-justify"></i></a>
<a href="#"><i class="fa fa-fw fa-wifi"></i></a>
<a href="#"><i class="fa fa-fw fa-user"></i></a>
<a class="active" href="#"><i class="fa fa-fw fa-gear"></i></a>
</div>

它的优点是不会扭曲圆。