3
votes

Comment ajouter une bordure sous chaque lien de navigation sans rendre la bordure inférieure plus grasse

Je n'arrive pas à rendre la bordure inférieure sous le lien LinkedIn moins grasse car elle est à double bordure.

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="services.html">Services</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="https://www.linkedin.com/in/derrickogole">LinkedIn</a></li>
</ul>

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  width: 100px;
  border: 1px solid;
  border-bottom: 1px solid;
}

li a {
  display: block;
  color: #000000;
  padding: 8px 16px;
  text-decoration: none;
  text-align: center;
  border: 1px;
  border-bottom: 1px solid;
}

li:last-child {
  border-bottom: none;
}

li a:hover {
  background-color: red;
  color: white;
}

html css

4 commentaires

Si vous dites que le dernier li ne doit pas avoir de bordure, alors border-bottom: 1px solid; devrait être sur le li , pas sur le a .

ul {border-bottom: none;}

Juste besoin d'une petite mise à jour - li: last-child a {border-bottom: none; }

Avez-vous * {border-collapse: collapse; } défini dans le style?

4 Réponses :

4
votes

changer css

li:last-child a {
  border-bottom: none; 
}

1 commentaires

Ça a marché. C'était très simple. Je n'ai commencé à coder que la semaine dernière.

0
votes

Voici ma solution avec une classe supplémentaire:

.liBorder {
  border-bottom: solid black 1px;
}

<ul>
  <li class="liBorder"><a href="index.html">Home</a></li>
  <li class="liBorder"><a href="about.html">About</a></li>
  <li class="liBorder"><a href="services.html">Services</a></li>
  <li class="liBorder"><a href="contact.html">Contact</a></li>
  <li class="liBorder"><a href="https://www.linkedin.com/in/derrickogole">LinkedIn</a></li>
</ul>

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  width: 100px;
  border: 1px solid;
  border-bottom: 1px solid;
}

li a {
  display: block;
  color: #000000;
  padding: 8px 16px;
  text-decoration: none;
  text-align: center;
  border: 1px;
  border-bottom: 1px solid;
}

li:last-child {
  border-bottom: none;
}

li a:hover {
  background-color: red;
  color: white;
}

.liBorder {
  border-bottom: solid black 1px;
}

https : //jsfiddle.net/master1991/cjzfdg3v/3/

1 commentaires

Ça va. Je suis littéralement un débutant avec HTML et CSS donc je vais jouer avec vos modifications même si cela ne sert à rien. LOOL!

3
votes

Quand vous faites cela:

  border-bottom: 1px solid;

vous dites à CSS d'ajouter une bordure en bas à tous les liens à l'intérieur d'un li.

li:last-child a {
  border-bottom: none; 
}

était presque correct, mais vous n'avez pas dit à css la même règle que l'extrait de code précédent.

la bonne façon de le mettre est

li:last-child {
  border-bottom: none;
}

Une autre chose que vous peut supprimer

li a {
      border-bottom: 1px solid;
    }

à l'intérieur du bloc ul il ne fait rien

1 commentaires

Merci pour l'aide Greco. Je suis littéralement un débutant avec HTML et CSS. Appréciez-le.

0
votes

vous pouvez utiliser ce css

li:last-child a {
  border-bottom: none; 
}
li:last-child {
  border-bottom: none;
}

0 commentaires