Comment empêcher les sauts de ligne dans les éléments de liste avec des liens ?

Prévention des sauts de ligne dans les éléments de liste avec CSS

Lors de l'incorporation de liens contenant plusieurs mots dans une liste de menu (par exemple, des balises

), les espaces peuvent provoquer un retour à la ligne. Ce problème peut être résolu à l'aide de techniques CSS.

Solution :

Pour éviter le retour à la ligne dans les éléments de liste, utilisez la propriété CSS suivante :

white-space: nowrap;

Cette propriété indique au navigateur de ne pas envelopper les lignes dans l'élément, garantissant ainsi que l'intégralité du texte reste sur une seule ligne.

Exemple :

<ul>
  <li><a href="#">Submit resume</a></li>
</ul>

<style>
  ul li {
    white-space: nowrap;
  }
</style>

Alternativement, vous pouvez fournir plus d'espace pour le lien en ajustant la largeur du champ

élément :

li {
  width: 150px;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!