Halten Sie die anderen Elemente in seinem Behälter aus Schieben um Ändern der Größe Text?

Question

Ich habe folgendes html

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

und in den CSS Ich habe

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

alles funktioniert ziemlich gut, außer dass, wenn ich die Maus über die Links, die Farbe ändert, und es wird fett, das ist, was ich will, aber es verursacht auch alle anderen li Elemente leicht zu bewegen und dann wieder bewegen, wenn Sie Maus-off. Gibt es einen einfachen Weg, dies zu stoppen passiert?

Answer 1

Nicht sicher, wer -1ed, aber Mauro Antwort ist im wesentlichen richtig. Sie nicht trivialerweise ein Element mit automatischer Breite davon abhängen, was die Breite hätte machen können, wenn die Schrift nach innen nicht fett sind

Allerdings ist ein 'float: left;' Regel wird auch notwendig sein, da Sie nicht die Breite eines Inline-Anzeigeelement einstellen. Und ‚em‘ wäre wahrscheinlich eine bessere Einheit sein, auf die erforderliche Breite abhängig von der Schriftgröße in den Tasten zu machen.

Answer 2

Fügen Sie eine Breite zu den Listenelement Elemente, die größer ist als die bolded Breite der Elemente ist, auf diese Weise sie aus der Reihe geschoben werden wont.

#menu li
{
   width: 150px;
}

Alternativ können Sie eine nichtproportionale Schrift versuchen, die Gewohnheit durch die fett / nicht fett auf schweben betroffen sein.

Answer 3

versuchen, diese mit MenuText { line-height: 10px; /* oder Wasauchimmer */ }

und auch die Breite eines Inline-Element setzen, dienen zur Anzeige: Inline-Block;

float: left vielleicht nicht so freundlich sein, wenn Sie es verwenden und es vermasselt Dinge Gebrauch clear: both

Answer 4

Ich hatte gerade das gleiche Problem. Eine Lösung, die ich dachte, und könnte von jetzt an nutzen, ist stattdessen text-shadow zu verwenden.

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

Der Text wird zwar ein wenig Unschärfe aussehen. Wenn Sie den dritten Parameter auf 0 gesetzt, Text wird nicht verwischen, sondern sieht nur ein wenig kühne.

würde ich sagen, das ist besser als mit der Breite dynamische Texte handelt.