Inline-Elemente verschieben sich, wenn sie beim Schweben fett gedruckt werden

Ich habe ein horizontales Menü mit HTML-Listen und CSS erstellt. Alles funktioniert wie es sollte, außer wenn Sie mit der Maus über die Links fahren. Sie sehen, ich habe einen fetten Schwebezustand für die Links erstellt, und jetzt verschieben sich die Menü-Links aufgrund des fetten Größenunterschieds.

Ich habe das gleiche Problem wie bei diesem SitePoint-Beitrag . Die Post hat jedoch keine richtige Lösung. Ich habe überall nach einer Lösung gesucht und kann keine finden. Sicher kann ich nicht der einzige sein, der versucht, dies zu tun.

Hat jemand irgendwelche Ideen?

PS: Ich kenne die Breite des Textes in Menüelementen nicht, daher kann ich nicht einfach die Breite der Li-Elemente festlegen.

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

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>

Überprüfen Sie das Arbeitsbeispiel für JSfiddle . Die Idee ist, Platz für fettgedruckten Inhalt (oder einen beliebigen Statusstil :hover) im Pseudoelement zu reservieren :beforeund das Titel-Tag als Quelle für den Inhalt zu verwenden.

Eine kompromittierte Lösung besteht darin, Fett mit Textschatten zu fälschen, z.

Textschatten: 0 0 0,01px schwarz;

Zum besseren Vergleich habe ich folgende Beispiele erstellt:

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>

Wenn Sie auf einen text-shadowwirklich niedrigen Wert für übergeben, blur-radiuswird der Unschärfeeffekt nicht so deutlich.

Im Allgemeinen wird text-shadowIhr Text umso mutiger, je öfter Sie ihn wiederholen , aber gleichzeitig verlieren Sie die ursprüngliche Form der Buchstaben.

Ich sollte Sie warnen, dass das Setzen von blur-radiusauf Brüche nicht in allen Browsern gleich ist! Safari benötigt zum Beispiel größere Werte, um es genauso zu rendern wie Chrome.

Wenn Sie die Breite nicht einstellen können, ändert sich die Breite, wenn der Text fett wird. Es gibt keine Möglichkeit, dies zu vermeiden, außer durch Kompromisse wie das Ändern der Auffüllung / Ränder für jeden Zustand.

Eine andere Idee ist die Verwendung 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>

Eine Zeile in jquery:

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

Bearbeiten: Während dies die Lösung bewirken kann, sollte man erwähnen, dass es nicht in Verbindung mit dem Code im ursprünglichen Beitrag funktioniert. "display: inline" muss durch Floating-Parameter ersetzt werden, damit eine Breiteneinstellung effektiv ist und das horizontale Menü wie vorgesehen funktioniert.

CSS3-Lösung - experimentell

Dachte, eine andere Lösung zu teilen, die hier niemand vorschlug. Es gibt eine Eigenschaft namens, text-strokedie dafür nützlich sein wird.

p span:hover {
  -webkit-text-stroke: 1px black;
}

<p>Some stuff, <span>hover this,</span> it's cool</p>

Hier ziele ich auf den Text innerhalb des spanTags und wir streichen ihn um ein Pixel, mit blackdem der boldStil für diesen bestimmten Text simuliert wird .

Beachten Sie, dass diese Eigenschaft derzeit nicht allgemein unterstützt wird (während Sie diese Antwort schreiben). Dies scheint nur von Chrome und Firefox unterstützt zu werden. Weitere Informationen zur Browserunterstützung für text-strokefinden Sie unter CanIUse .

Nur um ein paar zusätzliche Dinge zu teilen, können Sie sie verwenden, -webkit-text-stroke-width: 1px;wenn Sie keine colorfür Ihren Schlaganfall festlegen möchten.

Sie könnten etwas wie gebrauchen

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

und dann in Ihrem CSS einfach den Span-Inhalt fett setzen und ihn mit Sichtbarkeit ausblenden: versteckt, damit er seine Dimensionen behält. Anschließend können Sie die Ränder der folgenden Elemente anpassen, damit sie richtig passen.

Ich bin mir nicht sicher, ob dieser Ansatz SEO-freundlich ist.

Ich habe das Problem gerade mit der "Schatten" -Lösung gelöst. Es scheint am einfachsten und effektivsten.

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

Der Schatten muss nicht dreimal wiederholt werden (das Ergebnis war für mich das gleiche).

Ich hatte ein ähnliches Problem wie Sie. Ich wollte, dass meine Links fett werden, wenn Sie mit der Maus darüber fahren, aber nicht nur im Menü, sondern auch im Text. Wie Sie sich vorstellen können, wäre es eine echte Aufgabe, die verschiedenen Breiten herauszufinden. Die Lösung ist ziemlich einfach:

Erstellen Sie ein Feld, das den Link-Text in Fettdruck enthält, aber farbig wie Ihr Hintergrund und Ihren echten Link darüber. Hier ist ein Beispiel von meiner Seite:

CSS:

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

Natürlich müssen Sie # FFFFE0 durch die Hintergrundfarbe Ihrer Seite ersetzen. Die Z-Indizes scheinen nicht notwendig zu sein, aber ich setze sie trotzdem ein (da das "Hypo" -Element nach dem "Hyper" -Element im HTML-Code auftritt). Fügen Sie nun Folgendes hinzu, um einen Link auf Ihre Seite zu setzen:

HTML:

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

Das zweite "hier" wird unsichtbar und unter Ihrem Link versteckt. Da dies ein statisches Feld ist, in dem Ihr Linktext fett gedruckt ist, wird der Rest Ihres Textes nicht mehr verschoben, da er bereits verschoben wird, bevor Sie mit der Maus über den Link fahren.

Hoffe ich konnte helfen :).

So lange

Sie können mit der Eigenschaft "margin" arbeiten:

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

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

Stellen Sie einfach sicher, dass der linke und der rechte Rand groß genug sind, damit der zusätzliche Platz den fetten Text enthalten kann. Für lange Wörter können Sie unterschiedliche Ränder wählen. Es ist nur eine weitere Problemumgehung, aber ich mache den Job für mich.

Ich verwende stattdessen gerne Textschatten. Vor allem, weil Sie Übergänge verwenden können, um Textschatten zu animieren.

Alles was Sie wirklich brauchen ist:

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

Eine vollständige Navigation finden Sie in dieser jsfiddle: https://jsfiddle.net/831r3yrb/

Browserunterstützung und weitere Informationen zu Textschatten: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Ich würde davon abraten, beim Hover die Schriftarten (°) zu wechseln. In diesem Fall bewegen sich nur die Menüelemente etwas, aber ich habe Fälle gesehen, in denen der gesamte Absatz neu formatiert wird, weil die Verbreiterung einen zusätzlichen Zeilenumbruch verursacht. Sie möchten nicht, dass dies geschieht, wenn Sie nur den Cursor bewegen. Wenn Sie nichts tun, sollte sich das Seitenlayout nicht ändern.

Die Verschiebung kann auch beim Umschalten zwischen normal und kursiv erfolgen. Ich würde versuchen, die Farben zu ändern oder die Unterstreichung umzuschalten, wenn Sie Platz unter dem Text haben. (Unterstreichung sollte vom unteren Rand frei bleiben)

Ich wäre ausgebuht, wenn ich für meine Form Design-Klasse wechselnde Schriftarten verwenden würde :-)

(°) Das Wort Schriftart wird häufig missbraucht. "Verdana" ist eine Schriftart , "Verdana normal" und "Verdana fett" sind verschiedene Schriftarten derselben Schriftart.

Ich verwende eine Textschattenlösung wie einige andere, die hier erwähnt werden:

text-shadow: 0 0 0.01px;

Der Unterschied besteht darin, dass ich keine Schattenfarbe spezifiziere, daher ist diese Lösung für alle Schriftfarben universell.

Ein alternativer Ansatz wäre, fett gedruckten Text über Textschatten zu "emulieren". Dies hat den Bonus (/ malus, abhängig von Ihrem Fall), auch auf Schriftsymbolen zu funktionieren.

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

Ein bisschen hacky, obwohl es Sie vor dem Duplizieren von Text bewahrt (was nützlich ist, wenn es viel ist, wie es in meinem Fall war).

Dies ist die Lösung, die ich bevorzuge. Es erfordert ein bisschen JS, aber Sie müssen nicht, dass Ihre title-Eigenschaft exakt gleich ist, und Ihr CSS kann sehr einfach bleiben.

$('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>

Was ist damit? Eine Javascript - CSS3 freie Lösung.

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>

Keine sehr elegante Lösung, aber "funktioniert":

a
{
    color: #fff;
}

a:hover
{
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

Ich habe eine Reihe der oben genannten Techniken kombiniert, um etwas bereitzustellen, das bei ausgeschaltetem js nicht völlig scheiße ist und mit ein bisschen jQuery sogar noch besser ist. Jetzt, da die Browser-Unterstützung für Subpixel-Buchstabenabstände verbessert wird, ist es wirklich schön, sie zu verwenden.

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>

Es ist besser, ein :: vor statt ein :: nach wie folgt zu verwenden:

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

Für weitere Informationen: https://jsfiddle.net/r25foavy/

Ich habe das Menü korrigiert, wenn ich über mutigen Erfolg schwebe. Es unterstützt Responsive, das ist mein 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);

Wenn Sie die Verwendung von Javascript nicht ablehnen, können Sie die richtige Breite festlegen, sobald die Seite angezeigt wird. So habe ich es gemacht (mit 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' });
}

Ich kann es wirklich nicht ertragen, wenn jemand Ihnen sagt, dass Sie etwas nicht so tun sollen, wenn es eine einfache Lösung für das Problem gibt. Ich bin mir bei li-Elementen nicht sicher, aber ich habe das gleiche Problem behoben. Ich habe ein Menü bestehend aus div-Tags.

Setzen Sie einfach das div-Tag auf "display: inline-block". Inline, damit sie nebeneinander sitzen und blockieren, können Sie eine Breite einstellen. Stellen Sie einfach die Breite so weit ein, dass sie dem fettgedruckten Text entspricht, und richten Sie die Textmitte aus.

(Hinweis: Es scheint, als würde mein HTML-Code [unten] entfernt, aber um jeden Menüpunkt wurde ein div-Tag mit der entsprechenden ID und dem Klassennamen SearchBar_Cateogory gewickelt. <div id="ROS_SearchSermons" class="SearchBar_Category">

HTML (Ich hatte Ankertags um jeden Menüpunkt gewickelt, konnte sie aber nicht als neuen Benutzer einreichen.)

<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;
}

Versuche dies:

.nav {
  font-family: monospace;
}

Sie können auch die negativen Ränder ausprobieren, wenn der fette Text breiter als der normale ist. (nicht immer) Die Idee ist also, stattdessen Klassen zu verwenden, um den Hover-Status zu formatieren.

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;
}

Ich hoffe ich konnte helfen!