2012-04-12 8 views
2

Ich mache eine Webseite mit einem Menü mit ul und floated li. Um die aktive Seite von anderen Seiten zu unterscheiden, sowie wenn ich den Mauszeiger über einen Link halte, wird der Text fett dargestellt.Die Breite des Containers wird durch Fettschrift festgelegt.

Das Problem, das ich damit habe ist, dass, wenn der Text fett wird, es alles im Menü herumschiebt.()

Eine mögliche Lösung, an die ich dachte, war die Breite jedes Menüelements durch die Größe des fett gedruckten Textes zu bestimmen, aber ich weiß nicht, ob das möglich ist (zumindest ohne Javascript).

Irgendwelche Vorschläge?

+0

Es gibt keine einfache CSS-Lösung für dieses Problem. Es ist einfach, mit JavaScript zu reparieren. – thirtydot

+1

Ich habe versucht, JavaScript zu verwenden, und es sieht immer noch nicht gut aus: http://jsfiddle.net/thirtydot/tVDaf/1/. Der Abstand zwischen den Links ist unterschiedlich, da jedes Wort bei Fettdruck einen anderen Wert annimmt. Mein Tipp: Verwenden Sie einen anderen Hover-Effekt. – thirtydot

+0

Ich hasse es, Javascript für etwas so einfach zu verwenden, aber die Lösung, die Sie bereitgestellt haben, ist gut genug. Danke, dreißig! – sgcharlie

Antwort

1

Ich kann drei Möglichkeiten für Sie sehen. Die letzte ist wahrscheinlich die beste Wahl:

  1. verwenden JavaScript
  2. Verwenden Sie einen nichtproportionalen Schrift
  3. eine Breite auf den
  4. li tags Satz
0

Die einzige wirklich Weg, dies zu tun, ist jeder zu setzen bis zu einer bestimmten Breite, denn im Moment ist es so eingestellt, dass es die Breite des Ankers darin ist. Es ist in der Regel nicht ratsam, die Anker zu überkreuzen, sondern stattdessen die Farben zu ändern.

0

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

alle Kredite dieser Antwort sind für Andrew Vit, wenn es Ihnen seinen Kommentar hier vote up hilft: Inline elements shifting when made bold on hover

und bitte das Forum vor der Veröffentlichung suchen, weil ich diesen von vielen

kommt gesehen habe
Verwandte Themen