Empêcher le redimensionnement du texte de repousser les autres éléments de son conteneur?

StackOverflow https://stackoverflow.com/questions/217741

  •  03-07-2019
  •  | 
  •  

Question

J'ai le code HTML suivant 

          <div id="menu">
            <ul class="horizMenu">
            <li id="active"><a href="#" id="current">About</a></li>
            <li><a href="#">Archive</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Item four</a></li>
            <li><a href="#">Item five</a></li>
            </ul>
        </div>

et dans le css j'ai 

.horizMenu li
{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}
#menu
{


    text-align:center;
    margin-bottom:10px;
    letter-spacing:7px;
}
#menu a
{
    color:red;

}
#menu a:hover
{
    color:blue;
    font-weight:bold;
}

Tout fonctionne plutôt bien, sauf que lorsque je passe la souris sur les liens, la couleur change et devient gras, ce que je veux, mais cela provoque également un léger déplacement de tous les autres éléments li, puis un recul souris-off. Y a-t-il un moyen facile d'empêcher que cela se produise?

Était-ce utile?

La solution

Vous ne savez pas exactement qui a gagné, mais la réponse de Mauro est essentiellement correcte: vous ne pouvez pas créer trivialement un élément avec une largeur automatique en fonction de ce que la largeur aurait été si la police à l'intérieur n'avait pas été en gras.

Cependant, un 'float: left;' Une règle sera également nécessaire, car vous ne pouvez pas définir la largeur d’un élément inline-display. Et "em" serait probablement une meilleure unité, pour que la largeur requise dépende de la taille de la police dans les boutons.

Autres conseils

Ajoutez aux éléments d’éléments de la liste une largeur supérieure à la largeur en gras des éléments. Ainsi, ils ne seront pas décalés. 

#menu li
{
   width: 150px;
}

Vous pouvez également essayer une police monospace, qui ne sera pas affectée par les caractères gras / non gras en survol.

essayez d'utiliser ceci menutext { hauteur de ligne: 10px; /* ou peu importe */ }

et pour définir la largeur d'un élément en ligne, utilisez display: inline-block;

float: left n'est peut-être pas si sympathique, si vous l'utilisez et que tout se gâte, utilisez clair: les deux

Je viens d'avoir le même problème. Une solution à laquelle je pensais et que je pourrais utiliser désormais est d’utiliser plutôt text-shadow. 

a:hover {
  color:blue;
  text-shadow:0px 0px 1px blue;
}

Cependant, le texte sera un peu flou. Si vous définissez le troisième paramètre sur 0, le texte ne sera pas flou mais semblera un peu plus gras.

Je dirais que c'est mieux que de traiter avec des textes dynamiques en largeur.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top