J'essaie de créer une barre de navigation avec des balises et des icônes a, mais il existe pour une raison quelconque une séparation entre elles lorsque l'arrière-plan de la balise a n'est pas directement derrière l'icône. Voici une image de ce que je veux dire: https://gyazo.com/986c59e17f031ce0b94547af6bceebac Voici mes html et css actuels pour la barre de navigation:

.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>

Comment puis-je résoudre ce problème pour aligner la balise a et l'icône?

2
TTV jokzyz 6 avril 2020 à 10:37

3 réponses

Meilleure réponse

Vous devez supprimer les line-height et size sur votre lien <a>, comme ceci:

.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>
1
Jérôme W 6 avril 2020 à 07:50

Vous pouvez facilement réaliser cette mise en page en utilisant des propriétés flexbox comme ça:

.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>

Il a l'avantage de ne pas déformer les cercles.

1
johannchopin 6 avril 2020 à 07:48

Supprimez les propriétés de hauteur et de largeur de la balise a et définissez le rembourrage sur les icônes

.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>
1
jo3rn 6 avril 2020 à 07:44