Elementy w linii przesuwają się, gdy są odważne po najechaniu myszą

204

Stworzyłem horyzontalne menu przy użyciu list HTML i CSS. Wszystko działa tak, jak powinno, chyba że najedziesz myszką na linki. Widzisz, stworzyłem pogrubiony stan najechania na linki, a teraz linki menu zmieniają się z powodu pogrubionej różnicy wielkości.

Napotykam ten sam problem, co ten post SitePoint . Jednak post nie ma odpowiedniego rozwiązania. Wszędzie szukałem rozwiązania i nie mogę go znaleźć. Z pewnością nie mogę być jedynym, który próbuje to zrobić.

Czy ktoś ma jakieś pomysły?

PS: Nie znam szerokości tekstu w elementach menu, więc nie mogę po prostu ustawić szerokości elementów 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>

Pałka policjanta
źródło

Odpowiedzi:

390

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>

Sprawdź działający przykład JSfiddle . Chodzi o to, aby zarezerwować miejsce na pogrubioną (lub dowolny :hoverstyl stanu) treść w :beforepseudoelemencie i użyć tagu tytułu jako źródła treści.

350D
źródło
20
Idealny! Działa dla <a> nawet bez użycia ul, użyłbym jednak innego atrybutu, jak dane-tekst zamiast tytułu.
brittongr
6
To rozwiązanie działa, ale jej lepiej, gdy dodasz margin-top: -1pxdo :afteruniknięcia tworzenia przestrzeni 1px wysokości.
micropro.cz,
4
@ mattroberts33 :vs ::„Każda przeglądarka obsługująca podwójną ::składnię CSS3 obsługuje również :samą składnię, ale IE 8 obsługuje tylko pojedynczy dwukropek, więc na razie zaleca się używanie pojedynczego dwukropka, aby uzyskać najlepszą obsługę przeglądarki”. css-tricks.com/almanac/selectors/a/after-and-before
gfullam
1
@HughHughTeotl Użyj rozmiaru czcionki: 0 ULlub a::after, innymi słowy - zresetuj wszystkie wypełnienia / marginesy / wysokości linii / rozmiary czcionek itp.
350D
1
Niestety, zawsze wyświetlasz podpowiedź :-(
Benedikt,
42

Rozwiązaniem zagrożonym jest fałszywe pogrubienie za pomocą cienia tekstu, np .:

cień tekstu: 0 0 0,01 pikseli czarny;

Dla lepszego porównania stworzyłem następujące przykłady:

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>

Przejście na text-shadownaprawdę niską wartość blur-radiusspowoduje, że efekt rozmycia nie będzie tak widoczny.

Ogólnie rzecz biorąc, im więcej powtórzysz, text-shadowtym odważniejszy będzie twój tekst, ale jednocześnie tracisz oryginalny kształt liter.

Ostrzegam, że ustawienie blur-radiusułamków nie spowoduje renderowania tego samego we wszystkich przeglądarkach! Safari na przykład potrzebuje większych wartości, aby renderować je tak samo, jak Chrome.

Stefan J
źródło
6
Jest to nawet brzydsze niż inne odważne rozwiązania obliczane w przeglądarce i należy tego unikać
Zach Saucier
28

Jeśli nie możesz ustawić szerokości, oznacza to, że szerokość zmieni się wraz z pogrubieniem tekstu. Nie można tego uniknąć, z wyjątkiem kompromisów, takich jak modyfikowanie marginesów / marginesów dla każdego stanu.

Andrew Vit
źródło
2
+1, jak mówi Andrzej, pogrubiony tekst jest szerszy. Życiowy fakt. Nawet napraw szerokość pozycji menu, aby tego uniknąć lub żyć z nią (ponowne obliczanie wypełnienia jest nieprecyzyjne i podatne na błędy).
cletus
Tak, z tego powodu staram się unikać odważnego efektu najechania kursorem myszy.
Steve Wortham,
„Nie ma sposobu, aby tego uniknąć”. Zobacz odpowiedź 350D poniżej.
gfullam
Zwróć też uwagę, że odpowiedź Andrzeja została opublikowana 4 lata przed dodaniem rozwiązania 350D. Pseudoelementy z funkcją attr () jako wartość treści wtedy absolutnie nie były możliwe :) oh czas płynie przy przepełnieniu stosu. Jednak społeczność się z tym zgadza i jest to zaakceptowana odpowiedź i większość entuzjastów, więc cieszę się!
Justus Romijn
25

Innym pomysłem jest użycie 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
źródło
Czy to działa ze wszystkimi przeglądarkami, zwłaszcza IE10 + i Safari?
Umair Hafeez,
mój ulubiony :)
Inc33
1
@UmairHafeez tak wszystkie nowoczesne przeglądarki oczekują mini opera caniuse.com/#feat=css-letter-spacing
John Magnolia
1
Skąd wiedziałeś, że 0.235px to idealna ilość? Czy istnieje wzór na obliczenie potrzebnych odstępów?
Cold_Class
Nie, myślę, że to była tylko szybka próba i błąd
John Magnolia
17

Jedna linia w jquery:

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

edycja: Chociaż może to doprowadzić do rozwiązania, należy wspomnieć, że nie działa ono w połączeniu z kodem w oryginalnym poście. „display: inline” należy zastąpić zmiennymi parametrami, aby ustawienie szerokości było skuteczne, a menu poziome działało zgodnie z przeznaczeniem.

Alex
źródło
Czy możesz to zrobić dla wszystkich linków na stronie? Czy zastąpienie ul.nav li aprzez aprace?
gnzlbg
2
To pytanie nie było oznaczone JS, nie mówiąc już o jQuery. Nie publikuj niepotrzebnych rozwiązań.
Zach Saucier
2
@Zach Saucier W niektórych sytuacjach niektórzy deweloperzy mogą preferować rozwiązanie JS, ponieważ zwykle są one krótsze. Zamiast przegłosować wszystkich, którzy opublikowali coś za pomocą JS, możesz dodać tag JS do pytania i pozwolić każdej osobie zdecydować, które rozwiązanie będzie dla niej bardziej przydatne.
lurkit
1
@Zach Saucier Rozwiązanie CSS może nie być praktyczne w niektórych sytuacjach. Czasami możesz potrzebować innego atrybutu tytułu lub już wykorzystałeś pseudoelement :: after, lub możesz osobiście rozważyć bardziej praktyczne zastosowanie w danej sytuacji, aby użyć jednej linijki w JS do kilku linii CSS. Uważam, że odpowiedź CSS jest lepsza w większości przypadków, ale warto mieć odpowiedzi JS jako dodatkowe opcje.
lurkit,
To jedyne rozwiązanie, jakie udało mi się znaleźć, które rozwiązuje problem, zachowując równe odstępy między elementami.
Jaiden Mispy
11

Rozwiązanie CSS3 - eksperymentalne

(Fałszywa śmiałość)

Zastanawiałem się nad innym rozwiązaniem, którego nikt tutaj nie zaproponował. Jest tak zwana właściwość, text-strokektóra będzie do tego przydatna.

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

Tutaj celuję w tekst wewnątrz spantagu i gładzimy go pikselem, blackktóry będzie symulował boldstyl dla tego konkretnego tekstu.

Pamiętaj, że ta właściwość nie jest obecnie szeroko obsługiwana (podczas pisania tej odpowiedzi) tylko Chrome i Firefox wydają się to obsługiwać. Więcej informacji na temat obsługi przeglądarki text-strokemożna znaleźć w CanIUse .


Tylko do dzielenia się dodatkowymi rzeczami, możesz użyć, -webkit-text-stroke-width: 1px;jeśli nie chcesz ustawić colorswojego obrysu.

Pan Alien
źródło
To niesamowite
Alan Fitzpatrick
Świetna wskazówka. Niestety, po 4 latach nadal nie jest to standard.
Dávid Veszelovszki
5

Możesz użyć czegoś takiego

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

a następnie w swoim css po prostu ustaw pogrubioną zawartość i ukryj ją z widocznością: ukryta, aby zachowała swoje wymiary. Następnie możesz dostosować marginesy następujących elementów, aby dopasować je prawidłowo.

Nie jestem jednak pewien, czy takie podejście jest przyjazne SEO.

mnich
źródło
1
To również nie jest przyjazne dla programistów / konserwatorów
Zach Saucier
5

Właśnie rozwiązałem problem z rozwiązaniem „cienia”. Wydaje się najprostszy i najskuteczniejszy.

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

Nie trzeba powtarzać cienia trzy razy (wynik był dla mnie taki sam).

Daniele B.
źródło
Jest to nawet brzydsze niż inne odważne rozwiązania obliczane w przeglądarce i należy tego unikać
Zach Saucier
4

Miałem problem podobny do twojego. Chciałem, aby moje linki stały się pogrubione, gdy najedziesz na nie kursorem, ale nie tylko w menu, ale także w tekście. Jak się domyślasz, ustalenie różnych szerokości byłoby prawdziwym obowiązkiem. Rozwiązanie jest dość proste:

Utwórz pole zawierające pogrubiony tekst linku, ale w kolorze podobnym do tła, ale prawdziwy link nad nim. Oto przykład z mojej strony:

CSS:

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

Oczywiście musisz zastąpić # FFFFE0 kolorem tła swojej strony. Wskaźniki Z nie wydają się konieczne, ale i tak je umieszczam (ponieważ element „hypo” pojawi się po elemencie „hyper” w kodzie HTML). Teraz, aby umieścić link na swojej stronie, dołącz następujące elementy:

HTML:

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

Drugi „tutaj” będzie niewidoczny i ukryty pod linkiem. Ponieważ jest to pole statyczne z pogrubionym tekstem łącza, reszta tekstu nie będzie się już przesuwać, ponieważ jest już przesunięta przed najechaniem kursorem na link.

Mam nadzieję, że udało mi się pomóc :).

Tak długo


źródło
2

Możesz pracować z właściwością „margin”:

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

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

Upewnij się tylko, że lewy i prawy margines są wystarczająco duże, aby dodatkowe miejsce mogło zawierać pogrubiony tekst. W przypadku długich słów możesz wybrać różne marginesy. To tylko kolejne obejście, ale wykonanie pracy dla mnie.

Martin Horvath
źródło
Użyłem podobnego rozwiązania, ale dla mnie - dodanie „marginesu: 0 -2px” do stylu najechania myszką (i nie dodawanie niczego innego do normalnego stylu) - działało świetnie.
Yuval A.
8
To nie działa, jeśli istnieje jakakolwiek zmienność długości struny
kat
2

Zamiast tego wolę używać cienia tekstu. Zwłaszcza, że ​​możesz używać przejść do animowania cienia tekstu.

Wszystko, czego naprawdę potrzebujesz, to:

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

Aby uzyskać pełną nawigację, sprawdź ten jsfiddle: https://jsfiddle.net/831r3yrb/

Obsługa przeglądarki i więcej informacji na temat text-shadow: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Błyskawica
źródło
Działa to dobrze przy użyciu przejść. Świetne alternatywne rozwiązanie.
Yazmin
1

Odradzałbym przełączanie czcionek (°) po najechaniu myszą. W tym przypadku poruszają się tylko elementy menu, ale widziałem przypadki, w których cały akapit jest formatowany, ponieważ poszerzenie powoduje dodatkowe zawijanie wyrazów. Nie chcesz, aby tak się działo, gdy jedyne, co robisz, to poruszanie kursorem; jeśli nic nie zrobisz, układ strony nie powinien się zmienić.

Zmiana może nastąpić również podczas przełączania między normalnym a kursywą. Spróbowałbym zmienić kolory lub przełączyć podkreślenie, jeśli masz miejsce pod tekstem. (podkreślenie powinno pozostać wolne od dolnej granicy)

Byłbym oburzony, gdybym użył przełączających czcionek w mojej klasie Form Design :-)

(°) Czcionka słowa jest często niewłaściwie używana. „Verdana” to krój pisma , „Verdana normal” i „Verdana pogrubione” to różne czcionki tego samego kroju pisma.

stevenvh
źródło
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
źródło
1

Korzystam z rozwiązania text-shadow, jak wspomniano tutaj:

text-shadow: 0 0 0.01px;

różnica polega na tym, że nie określam koloru cienia, więc to rozwiązanie jest uniwersalne dla wszystkich kolorów czcionek.

michal.jakubeczy
źródło
1

Alternatywnym podejściem byłoby „naśladowanie” pogrubionego tekstu za pomocą cienia tekstu. Daje to bonus (/ malus, w zależności od przypadku) do pracy także z ikonami czcionek.

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

Trochę hacky, choć oszczędza to powielania tekstu (co jest przydatne, jeśli jest dużo, jak w moim przypadku).

EdoardoSchnell
źródło
0

To jest rozwiązanie, które wolę. Wymaga trochę JS, ale nie potrzebujesz dokładnie tej samej właściwości title, a twój CSS może pozostać bardzo prosty.

$('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
źródło
0

A co z tym? Javascript - bezpłatne rozwiązanie 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>
użytkownik10099
źródło
1
To jest sporo dodatkowych znaczników i CSS, aby rozwiązać problem ... To nie jest programista, SEO ani przyjazny dla przyszłości
Zach Saucier
0

Niezbyt eleganckie rozwiązanie, ale „działa”:

a
{
    color: #fff;
}

a:hover
{
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
Świeżu
źródło
0

Połączyłem kilka powyższych technik, aby zapewnić coś, co nie jest do kitu przy wyłączonym js, a jeszcze lepiej z odrobiną jQuery. Teraz, gdy poprawia się obsługa przeglądarek w zakresie odstępów między pikselami, naprawdę warto go używać.

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
źródło
0

Lepiej jest użyć :: before zamiast :: :: w następujący sposób:

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

Aby uzyskać więcej informacji: https://jsfiddle.net/r25foavy/

clisima
źródło
Czy możesz podać uzasadnienie, dlaczego a::beforebyłby lepszy niż a::after? Wydaje się, że to kluczowy element twojej odpowiedzi, ale nie jest oczywiste, dlaczego w tym przypadku jedno jest lepsze od drugiego.
nirvdrum
0

Naprawiłem menu, gdy najechałem odważnym sukcesem. Obsługuje responsive, to jest mój kod:

(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
źródło
-1

Jeśli nie masz nic przeciwko używaniu Javascript, możesz ustawić odpowiednią szerokość po wyświetleniu strony. Oto jak to zrobiłem (używając Prototypu):

$$('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
źródło
JavaScript nie został oznaczony w pytaniu, nie mówiąc już o jQuery. Proszę o odpowiedź, używając języków oznaczonych w pytaniu
Zach Saucier
-1

Naprawdę nie mogę tego znieść, gdy ktoś mówi ci, abyś nie robił czegoś w ten sposób, gdy istnieje proste rozwiązanie problemu. Nie jestem pewien co do elementów li, ale właśnie naprawiłem ten sam problem. Mam menu składające się z tagów div.

Wystarczy ustawić tag div na „display: inline-block”. Inline, więc siedzą obok siebie i blokują, że możesz ustawić szerokość. Wystarczy ustawić szerokość wystarczająco szeroką, aby pomieścić pogrubiony tekst i wyrównać środek tekstu.

(Uwaga: Wygląda na to, że usuwam mój HTML [poniżej], ale każdy element menu był owinięty tagiem div z odpowiednim identyfikatorem i nazwą klasy SearchBar_Cateogory. Tj .: <div id="ROS_SearchSermons" class="SearchBar_Category">

HTML (miałem tagi zakotwiczone wokół każdego elementu menu, ale nie byłem w stanie przesłać ich jako nowy użytkownik)

<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
źródło
1
To używa stałej szerokości, tak jak podany OP nie jest przypadkiem. Jako taka, odpowiedź ta nie odpowiada na zadane pytanie
Zach Saucier
-1

Spróbuj tego:

.nav {
  font-family: monospace;
}
Yukulélé
źródło
Jak to by cokolwiek zmieniło?
leonheess,
@ MiXT4PE W trybie monospace znaki mają ten sam rozmiar zwykłą lub pogrubioną czcionką. rozmiar się nie zmieni
Yukulélé
zmiana rodziny czcionek z tego powodu nie jest rozwiązaniem
funkysoul
Zmiana rodziny czcionek w celu naprawienia błędu interfejsu użytkownika nie jest rozwiązaniem, ponieważ rodzina czcionek jest przez większość czasu źródłem całej typografii marki.
Umair Hafeez,
Typografia jest dużą częścią projektowania interfejsu użytkownika, a kroje pisma zaprojektowane dla marki powinny uwzględniać ich użycie w interfejsach użytkownika. PT Sans i Clear Sans to dwa kroje pisma, których odstępy między glifami są podobne we wszystkich wagach. Niestety prawdą jest, że bardzo niewiele czcionek (nie o stałej szerokości) ma tę właściwość, i prawdopodobnie taniej jest zaimplementować jedną z pozostałych odpowiedzi na pytanie, niż płacić za opracowanie czcionki. Zmieni się to jednak wraz z poprawą dostępności czcionek Zmiennych. Zobacz v-fonts.com dla czcionek o zmiennej szerokości + grubości.
Peter W
-3

Możesz wypróbować również ujemne marginesy, jeśli pogrubiony tekst jest szerszy niż zwykły. (nie zawsze) Chodzi więc o użycie klas zamiast stylizować stan: 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;
}

Mam nadzieję, że mógłbym pomóc!

Robert Bokori
źródło
1
Nie publikuj odpowiedzi w językach innych niż oznaczone. To nie odpowiada na zadane pytanie
Zach Saucier