Éléments en ligne se déplaçant lorsqu'ils sont mis en gras en survol

205

J'ai créé un menu horizontal en utilisant une liste HTML et CSS. Tout fonctionne comme il se doit, sauf lorsque vous survolez les liens. Vous voyez, j'ai créé un état de survol en gras pour les liens, et maintenant les liens de menu changent en raison de la différence de taille en gras.

Je rencontre le même problème que ce message SitePoint . Cependant, le poste n'a pas de solution appropriée. J'ai cherché une solution partout et je n'en trouve pas. Je ne peux sûrement pas être le seul à essayer de faire ça.

Quelqu'un a-t-il une idée?

PS: Je ne connais pas la largeur du texte dans les éléments de menu, donc je ne peux pas simplement définir la largeur des éléments li.

.nav { margin: 0; padding: 0; }
.nav li { 
    list-style: none; 
    display: inline; 
    border-left: #ffffff 1px solid; 
}
.nav li a:link, .nav li a:visited { 
    text-decoration: none; 
    color: #000; 
    margin-left: 8px; 
    margin-right: 5px; 
}
.nav li a:hover{ 
    text-decoration: none; 
    font-weight: bold; 
}
.nav li.first { border: none; }
<ul class="nav">
    <li class="first"><a href="#">item 0</a></li>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
</ul>

Gamelle
la source

Réponses:

391

li {
    display: inline-block;
    font-size: 0;
}
li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}
a:hover {
    font-weight:bold;
}
a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
<ul>
    <li><a href="#" title="height">height</a></li>
    <li><a href="#" title="icon">icon</a></li>
    <li><a href="#" title="left">left</a></li>
    <li><a href="#" title="letter-spacing">letter-spacing</a></li>
    <li><a href="#" title="line-height">line-height</a></li>
</ul>

Vérifiez l'exemple de travail sur JSfiddle . L'idée est de réserver de l'espace pour le :hovercontenu en gras (ou tout style d'état) dans le :beforepseudo-élément et d'utiliser la balise de titre comme source pour le contenu.

350D
la source
20
Parfait! Cela fonctionne pour le <a> même sans utiliser un ul, j'utiliserais cependant un autre attribut comme data-text au lieu du titre.
brittongr
6
Cette solution fonctionne, mais c'est mieux lorsque vous ajoutez margin-top: -1pxà :afterpour éviter de créer un espace de 1px de hauteur.
micropro.cz
4
@ mattroberts33 :vs ::"Tous les navigateurs qui prennent en charge la ::syntaxe CSS3 à deux points ne prennent également en charge que la :syntaxe, mais IE 8 ne prend en charge que les deux-points. Pour l'instant, il est recommandé d'utiliser simplement les deux-points pour une meilleure prise en charge du navigateur." css-tricks.com/almanac/selectors/a/after-and-before
gfullam
1
@HughHughTeotl Utiliser la taille de police: 0 pour ULou a::after, en d'autres termes - réinitialiser tous les rembourrages / marges / hauteurs de ligne / tailles de police, etc.
350D
1
Malheureusement, l'info-bulle est toujours affichée :-(
Benedikt
42

Une solution compromise consiste à simuler le gras avec du texte, par exemple:

texte-ombre: 0 0 0,01 px noir;

Pour une meilleure comparaison, j'ai créé ces exemples:

a, li {
  color: black;
  text-decoration: none;
  font: 18px sans-serif;
  letter-spacing: 0.03em;
}
li {
  display: inline-block;
  margin-right: 20px;
  color: gray;
  font-size: 0.7em;
}
.bold-x1 a.hover:hover,
.bold-x1 a:not(.hover) {
  text-shadow: 0 0 .01px black;
}
.bold-x2 a.hover:hover,
.bold-x2 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black;
}
.bold-x3 a.hover:hover,
.bold-x3 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black, 0 0 .01px black;
}
.bold-native a.hover:hover,
.bold-native a:not(.hover){
  font-weight: bold;
}

.bold-native li:nth-child(4),
.bold-native li:nth-child(5){
 margin-left: -6px;
 letter-spacing: 0.01em;
}
<ul class="bold-x1">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (text-shadow x1)</li>
</ul>
<ul class="bold-x2">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Extra Bold (text-shadow x2)</li>
</ul>
<ul class="bold-native">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (native)</li>
</ul>
<ul class="bold-x3">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Black (text-shadow x3)</li>
</ul>

Le passage à text-shadowune valeur vraiment faible blur-radiusrendra l'effet de flou moins apparent.

En général, plus vous répétez, text-shadowplus votre texte sera audacieux, mais en même temps, il perdra la forme originale des lettres.

Je dois vous avertir que la définition des blur-radiusfractions ne rendra pas la même chose dans tous les navigateurs! Safari, par exemple, a besoin de valeurs plus élevées pour le rendre de la même manière que Chrome.

Stefan J
la source
6
C'est encore plus laid que d'autres solutions audacieuses calculées par navigateur et devrait être évité
Zach Saucier
28

Si vous ne pouvez pas définir la largeur, cela signifie que la largeur changera lorsque le texte sera en gras. Il n'y a aucun moyen d'éviter cela, sauf par des compromis tels que la modification du remplissage / des marges pour chaque état.

Andrew Vit
la source
2
+1 comme le dit Andrew, le texte en gras est plus large. Fait de vie. Fixez même la largeur des éléments de menu pour éviter cela ou vivre avec (le rembourrage de recalcul est imprécis et sujet aux erreurs).
cletus
Oui, j'ai tendance à éviter l'effet de survol audacieux pour cette raison.
Steve Wortham
"Il n'y a aucun moyen d'éviter cela". Voir la réponse par 350D ci-dessous.
gfullam
A noter également que la réponse d'Andrew a été publiée 4 ans avant l'ajout de la solution de 350D. Les pseudo-éléments avec la fonction attr () comme valeur de contenu n'étaient absolument pas possibles à l'époque :) oh le temps passe vite à Stack Overflow. Cependant la communauté s'en remet et l'a c'est la réponse acceptée et la plupart des votes positifs, donc je suis heureux!
Justus Romijn
25

Une autre idée utilise letter-spacing

li, a { display: inline-block; }
a {
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
  letter-spacing: 0.235px
}

a:hover, a:focus {
  font-weight: bold;
  letter-spacing: 0
}
<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

John Magnolia
la source
Est-ce que cela fonctionne avec tous les navigateurs, spécialement IE10 + et Safari?
Umair Hafeez
mon préféré :)
Inc33
1
@UmairHafeez oui tous les navigateurs modernes s'attendent à l'opéra mini caniuse.com/#feat=css-letter-spacing
John Magnolia
1
Comment saviez-vous que 0,235px était la quantité parfaite? Existe-t-il une formule pour calculer l'espacement nécessaire?
Cold_Class
Non, je pense que c'était juste un essai et une erreur rapides
John Magnolia
17

Une ligne en jquery:

$('ul.nav li a').each(function(){
    $(this).parent().width($(this).width() + 4);
});

edit: Bien que cela puisse apporter la solution, il convient de mentionner que cela ne fonctionne pas en conjonction avec le code dans le message d'origine. "display: inline" doit être remplacé par des paramètres flottants pour qu'un réglage de largeur soit efficace et que ce menu horizontal fonctionne comme prévu.

Alex
la source
Pouvez-vous faire cela pour tous les liens de la page? Autrement dit, le remplacement ul.nav li apar des aœuvres?
gnzlbg
2
Cette question n'a pas été taguée avec JS, sans parler de jQuery. Veuillez ne pas publier de solutions inutiles.
Zach Saucier
2
@Zach Saucier Dans certaines situations, certains développeurs peuvent préférer une solution JS, car ils sont généralement plus courts. Au lieu de voter pour tous ceux qui ont publié quelque chose avec JS, vous pouvez ajouter la balise JS à la question et laisser chaque personne décider de la solution qu'elle trouve la plus utile.
lurkit
1
@Zach Saucier La solution CSS peut ne pas être pratique dans certaines situations. Parfois, vous devrez peut-être avoir un attribut de titre différent, ou déjà utilisé le pseudo-élément :: after, ou vous pourriez personnellement envisager plus pratique dans une situation donnée d'utiliser une seule ligne en JS pour plusieurs lignes de CSS. Je considère que la réponse CSS est supérieure dans la plupart des cas, mais il est utile d'avoir les réponses JS comme options supplémentaires.
lurkit
C'est la seule solution que j'ai pu trouver qui résout le problème tout en conservant un espacement uniforme entre les éléments.
Jaiden Mispy
11

Solution CSS3 - Expérimentale

(Fausse audace)

Pensé à partager une solution différente que personne n'a suggérée ici. Il y a une propriété appelée text-strokequi sera utile pour cela.

p span:hover {
  -webkit-text-stroke: 1px black;
}
<p>Some stuff, <span>hover this,</span> it's cool</p>

Ici, je cible le texte à l'intérieur de la spanbalise et nous le frappons d'un pixel avec blacklequel simulera le boldstyle de ce texte particulier.

Notez que cette propriété n'est pas largement prise en charge, pour l'instant (lors de la rédaction de cette réponse), seuls Chrome et Firefox semblent le prendre en charge. Pour plus d'informations sur la prise en charge du navigateur pour text-stroke, vous pouvez vous référer à CanIUse .


Juste pour partager des trucs supplémentaires, vous pouvez les utiliser -webkit-text-stroke-width: 1px;si vous ne cherchez pas à définir un colorpour votre AVC.

Alien
la source
C'est incroyable
Alan Fitzpatrick
Bon conseil. Malheureusement, il n'est toujours pas standard après 4 ans.
Dávid Veszelovszki
5

Vous pouvez utiliser quelque chose comme

<ul>
   <li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>

puis dans votre css, définissez simplement le contenu de l'intervalle en gras et masquez-le avec visibilité: caché, afin qu'il conserve ses dimensions. Ensuite, vous pouvez ajuster les marges des éléments suivants pour les adapter correctement.

Je ne sais pas si cette approche est compatible avec le référencement.

moine
la source
1
Ce n'est pas non plus convivial pour les développeurs / la maintenance
Zach Saucier
5

Je viens de résoudre le problème avec la solution "fantôme". Cela semble le plus simple et le plus efficace.

nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
    text-shadow:0 0 1px white;
}

Pas besoin de répéter l'ombre trois fois (le résultat était le même pour moi).

Daniele B
la source
C'est encore plus laid que les autres solutions audacieuses calculées par navigateur et devrait être évité
Zach Saucier
4

J'ai eu un problème similaire au vôtre. Je voulais que mes liens deviennent audacieux lorsque vous les survolez, non seulement dans le menu mais aussi dans le texte. Comme vous pouvez le deviner, ce serait une vraie corvée de découvrir toutes les différentes largeurs. La solution est assez simple:

Créez une boîte qui contient le texte du lien en gras mais coloré comme votre arrière-plan et mais votre vrai lien au-dessus. Voici un exemple de ma page:

CSS:

.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }

Bien sûr, vous devez remplacer # FFFFE0 par la couleur d'arrière-plan de votre page. Les z-indices ne semblent pas nécessaires mais je les mets quand même (car l'élément "hypo" apparaîtra après l'élément "hyper" dans le code HTML). Maintenant, pour mettre un lien sur votre page, incluez les éléments suivants:

HTML:

You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>

Le deuxième "ici" sera invisible et caché sous votre lien. Comme il s'agit d'une boîte statique avec le texte de votre lien en gras, le reste de votre texte ne se déplacera plus car il est déjà déplacé avant de passer la souris sur le lien.

J'espère que j'ai pu aider :).

Si longtemps


la source
2

Vous pouvez travailler avec la propriété "margin":

li a {
  margin: 0px 5px 0px 5px;
}

li a:hover {
  margin: 0;
  font-weight: bold;
}

Assurez-vous simplement que les marges gauche et droite sont suffisamment grandes pour que l'espace supplémentaire puisse contenir le texte en gras. Pour les mots longs, vous pouvez choisir différentes marges. C'est juste une autre solution de contournement, mais faire le travail pour moi.

Martin Horvath
la source
J'ai utilisé une solution similaire, mais pour moi - ajouter simplement 'margin: 0 -2px' au style de vol stationnaire (et n'ajouter rien d'autre au style normal) - a très bien fonctionné.
Yuval A.
8
Cela ne fonctionne pas s'il y a une quelconque variabilité dans la longueur de votre chaîne
kat
2

J'aime plutôt utiliser text-shadow. Surtout parce que vous pouvez utiliser des transitions pour animer l'ombre du texte.

Tout ce dont vous avez vraiment besoin est:

a {
  transition: text-shadow 1s;
}
a:hover {
  text-shadow: 1px 0 black;
}

Pour une navigation complète, consultez ce jsfiddle: https://jsfiddle.net/831r3yrb/

Prise en charge du navigateur et plus d'informations sur text-shadow: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Lightningsoul
la source
Cela fonctionne bien avec l'utilisation de transitions. Excellente solution alternative.
Yazmin
1

Je déconseille de changer de police (°) en survol. Dans ce cas, ce sont juste les éléments de menu qui bougent un peu, mais j'ai vu des cas où le paragraphe complet est reformaté parce que l'élargissement provoque un retour à la ligne supplémentaire. Vous ne voulez pas que cela se produise lorsque la seule chose que vous faites est de déplacer le curseur; si vous ne faites rien, la mise en page ne devrait pas changer.

Le décalage peut également se produire lors du basculement entre normal et italique. J'essaierais de changer les couleurs ou d'activer le soulignement si vous avez de la place sous le texte. (le soulignement doit rester éloigné de la bordure inférieure)

Je serais hué si j'utilisais des polices de commutation pour ma classe de conception de formulaire :-)

(°) Le mot police est souvent mal utilisé. "Verdana" est une police de caractères , "Verdana normal" et "Verdana bold" sont des polices différentes de la même police de caractères.

Stevenvh
la source
1

ul {
  list-style-marker: none;
  padding: 0;
}

li {
  display: inline-block;
}

li + li {
  margin-left: 1em;
}

a {
  display: block;
  position: relative;
  text-align: center;
}

a:before, a:after {
  content: attr(aria-label);
  text-decoration: inherit;
}

a:before {
  font-weight: bold;
  visibility: hidden;
}

a:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

a:hover:before {
  visibility: visible;
}

a:hover:after {
  display: none;
}
<ul>
  <li>
    <a href="" aria-label="Long-long-long"></a>
  </li><li>
    <a href="" aria-label="or"></a>
  </li><li>
    <a href="" aria-label="Short"></a>
  </li><li>
    <a href="" aria-label="Links"></a>
  </li><li>
    <a href="" aria-label="Here"></a>
  </li>
</ul>

Qwertiy
la source
1

J'utilise la solution text-shadow comme certaines autres mentionnées ici:

text-shadow: 0 0 0.01px;

la différence est que je ne spécifie pas la couleur de l'ombre, donc cette solution est universelle pour toutes les couleurs de police.

michal.jakubeczy
la source
1

Une autre approche consisterait à "émuler" du texte en gras via text-shadow. Cela a le bonus (/ malus, selon votre cas) pour fonctionner également sur les icônes de police.

   nav li a:hover {
      text-decoration: none;
      text-shadow: 0 0 1px; /* "bold" */
   }

Un peu hacky, même si cela vous évite de dupliquer du texte (ce qui est utile si c'est beaucoup, comme c'était le cas dans mon cas).

EdoardoSchnell
la source
0

C'est la solution que je préfère. Cela nécessite un peu de JS mais vous n'avez pas besoin que votre propriété title soit exactement la même et votre CSS peut rester très simple.

$('ul a').each(function() {
  $(this).css({
    'padding-left': 0,
    'padding-right': 0,
    'width': $(this).outerWidth()
  });
});
li, a { display: inline-block; }
a {
  padding-left: 10px;
  padding-right: 10px;
  text-align: center; /* optional, smoother */
}
a:hover { font-weight: bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

lurkit
la source
0

Et ça? Une solution sans Javascript - CSS3.

http://jsfiddle.net/u1aks77x/1/

ul{}
li{float:left; list-style-type:none; }
a{position:relative; padding-right: 10px; text-decoration:none;}
a > .l1{}
a:hover > .l1{visibility:hidden;}
a:hover > .l2{display:inline;}
a > .l2{position: absolute; left:0; font-weight:bold; display:none;}

<ul>
  <li><a href="/" title="Home"><span class="l1">Home</span><span class="l2">Home</span></a></li>
  <li><a href="/" title="Contact"><span class="l1">Contact</span><span class="l2">Contact</span></a></li>
  <li><a href="/" title="Sitemap"><span class="l1">Sitemap</span><span class="l2">Sitemap</span></a></li>
</ul>
user10099
la source
1
C'est beaucoup de balisage supplémentaire et de CSS pour résoudre le problème ... Ce n'est pas développeur, SEO ou convivial pour l'avenir
Zach Saucier
0

Solution pas très élégante, mais "qui marche":

a
{
    color: #fff;
}

a:hover
{
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
Świeżu
la source
0

J'ai combiné un tas de techniques ci-dessus pour fournir quelque chose qui ne craint pas totalement avec js désactivé et qui est encore mieux avec un peu de jQuery. Maintenant que les navigateurs prennent en charge l'espacement des lettres sous-pixels s'améliore, il est vraiment agréable de l'utiliser.

jQuery(document).ready(function($) {
  $('.nav a').each(function(){
      $(this).clone().addClass('hoverclone').fadeTo(0,0).insertAfter($(this));
    var regular = $(this);
    var hoverclone = $(this).next('.hoverclone');
    regular.parent().not('.current_page_item').hover(function(){
      regular.filter(':not(:animated)').fadeTo(200,0);
      hoverclone.fadeTo(150,1);
    }, function(){
      regular.fadeTo(150,1);
      hoverclone.filter(':not(:animated)').fadeTo(250,0);
    });
  });
});
ul {
  font:normal 20px Arial;
  text-align: center;
}
li, a {
  display:inline-block;
  text-align:center;
}
a {
  padding:4px 8px;
  text-decoration:none;
  color: #555;
}

.nav a {
  letter-spacing: 0.53px; /* adjust this value per font */
}
.nav .current_page_item a,
.nav a:hover {
  font-weight: bold;
  letter-spacing: 0px;
}
.nav li {
  position: relative;
}
.nav a.hoverclone {
  position: absolute;
  top:0;
  left: 0;
  white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li class="current_page_item"><a  href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

squarecandy
la source
0

Il vaut mieux utiliser un :: avant au lieu d' un :: après comme ceci:

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.breadcrumb li, 
.breadcrumb li a {
  display: inline-block;
}

.breadcrumb li:not(:last-child)::after {
  content: '>'; /* or anything else */
  display: inline-block;
}

.breadcrumb a:hover {
  font-weight: bold;
}

.breadcrumb a::before {
  display: block;
  content: attr(data-label);
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
<ul class="breadcrumb">
  <li><a data-label="one" href="https://www.google.fr/" target="_blank">one</a></li>
  <li><a data-label="two" href="https://duckduckgo.com/" target="_blank">two</a></li>
  <li><a data-label="three" href="#">three</a></li>
</ul>

Pour plus de détails: https://jsfiddle.net/r25foavy/

clisima
la source
Pouvez-vous s'il vous plaît justifier pourquoi a::beforeserait mieux que a::after? Cela semble être un élément clé de votre réponse, mais il n'est pas évident pourquoi l'un est préférable à l'autre dans ce cas.
nirvdrum
0

J'ai corrigé le menu lorsque je survole un succès audacieux. Il supporte responsive, voici mon code:

(function ($) {
'use strict';

$(document).ready(function () {
    customWidthMenu();
});
$(window).resize(function () {
    customWidthMenu();
});
function customWidthMenu() {
    $('ul.nav li a').each(function() {
        $(this).removeAttr('style');
        var this = $(this);
        var width = this.innerWidth();
        this.css({'width': width + 12});
    });
}})(jQuery);
Ty Phan
la source
-1

Si vous n'êtes pas opposé à l'utilisation de Javascript, vous pouvez définir la bonne largeur une fois la page affichée. Voici comment je l'ai fait (en utilisant Prototype):

$$('ul.nav li').each(this.setProperWidth);

setProperWidth: function(li)
{
  // Prototype's getWidth() includes padding, so we 
  // have to subtract that when we set the width.
  var paddingLeft = li.getStyle('padding-left'),
      paddingRight = li.getStyle('padding-right');

  // Cut out the 'px' at the end of each padding
  paddingLeft = paddingLeft.substring(0,paddingLeft.length-2);
  paddingRight = paddingRight.substring(0,paddingRight.length-2);

  // Make the li bold, set the width, then unbold it
  li.setStyle({ fontWeight: 'bold' });
  li.setStyle({ width: (li.getWidth() - paddingLeft - paddingRight) + 'px'});
  li.setStyle({ fontWeight: 'normal', textAlign: 'center' });
}
Alex Grin
la source
Javascript n'était pas tagué dans la question, sans parler de jQuery. Veuillez garder la réponse en utilisant les langues marquées dans la question
Zach Saucier
-1

Je ne peux vraiment pas le supporter quand quelqu'un vous dit de ne pas faire quelque chose de cette façon quand il y a une solution simple au problème. Je ne suis pas sûr des éléments li, mais je viens de résoudre le même problème. J'ai un menu composé de balises div.

Définissez simplement la balise div sur "display: inline-block". Inline afin qu'ils s'assoient côte à côte et bloquent pour que vous puissiez définir une largeur. Il suffit de définir la largeur suffisamment large pour accueillir le texte en gras et aligner le centre du texte.

(Remarque: il semble supprimer mon code HTML [ci-dessous], mais chaque élément de menu était entouré d'une balise div avec l'ID correspondant et le nom de classe SearchBar_Cateogory. <div id="ROS_SearchSermons" class="SearchBar_Category">

HTML (j'avais des balises d'ancrage enroulées autour de chaque élément de menu, mais je n'ai pas pu les soumettre en tant que nouvel utilisateur)

<div id="ROS_SearchSermons" class="SearchBar_Cateogry bold">Sermons</div>|
<div id="ROS_SearchIllustrations" class="SearchBar_Cateogry">Illustrations</div>|
<div id="ROS_SearchVideos" class="SearchBar_Cateogry">Videos</div>|
<div id="ROS_SearchPowerPoints" class="SearchBar_Cateogry">PowerPoints</div>|
<div id="ROS_SearchScripture" class="SearchBar_Cateogry">Scripture</div>|

CSS:

#ROS_SearchSermons { width: 75px; }
#ROS_SearchIllustrations { width: 90px; }
#ROS_SearchVideos { width: 55px; }
#ROS_SearchPowerPoints { width: 90px; }
#ROS_SearchScripture { width: 70px; }

.SearchBar_Cateogry
{
    display: inline-block;
    text-align:center;
}
Jørn Schou-Rode
la source
1
Cela utilise une largeur fixe comme l'OP spécifié n'est PAS le cas. En tant que telle, cette réponse ne répond pas à la question posée
Zach Saucier
-1

essaye ça:

.nav {
  font-family: monospace;
}
Yukulélé
la source
Comment cela changerait-il quelque chose?
leonheess
@ MiXT4PE Avec monospace, les caractères ont la même taille en régulier ou en gras. la taille ne changera pas
Yukulélé
changer une famille de polices à cause de cela n'est pas une solution
funkysoul
Changer la famille de polices pour corriger un bug d'interface utilisateur n'est pas une solution, car la famille de polices est la racine de toute typographie de marque la plupart du temps.
Umair Hafeez
La typographie est une grande partie de la conception de l'interface utilisateur et les polices de caractères conçues pour une marque doivent prendre en compte leur utilisation dans les interfaces utilisateur. PT Sans et Clear Sans sont deux polices dont l'espacement des glyphes est similaire entre les poids. Malheureusement, il est vrai que très peu de polices (non espacées) ont cette propriété, et il est probablement moins cher de mettre en œuvre l'une des autres réponses à la question que de payer pour le développement des polices. Cependant, cela changera à mesure que la disponibilité des polices variables s'améliorera. Voir v-fonts.com pour les polices à largeur et poids variables.
Peter W
-3

Vous pouvez également essayer les marges négatives si le texte en gras est plus large que le texte normal. (pas toujours) L'idée est donc d'utiliser des classes à la place pour styliser l'état: hover.

jQuery:

 $(".nav-main .navbar-collapse > ul > li > a").hover(function() {
    var originalWidth = $(this).outerWidth();

    $(this).parent().addClass("hover");
    $(this).css({
       "margin-left": -(($(this).outerWidth() - originalWidth) / 2),
       "margin-right": -(($(this).outerWidth() - originalWidth) / 2)
    });
 },
 function() {
    $(this).removeAttr("style");
    $(this).parent().removeClass("hover");
 });

CSS:

ul > li > a {
    font-style: normal;
}

ul > li > a.hover {
    font-style: bold;
}

J'espère que je pourrais aider!

Robert Bokori
la source
1
Veuillez ne pas publier de réponses dans des langues autres que celles balisées. Cela ne répond pas à la question posée
Zach Saucier