我使用HTML列表和CSS创建了一个水平菜单。一切工作,它应该除了当你悬停在链接。您可以看到,我为链接创建了一个粗体悬浮状态,现在菜单链接因为粗体大小的差异而移动。

我遇到了和这篇SitePoint文章一样的问题。然而,这篇文章并没有合适的解决方案。我到处寻找解决办法,但没有找到。 我肯定不是唯一一个想这么做的人。

有人有什么想法吗?

附注:我不知道菜单项中文本的宽度,所以我不能只设置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>


当前回答

jquery中的一行:

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

编辑: 虽然这可以带来解决方案,但应该提到的是,它不能与原始文章中的代码一起工作。"display:inline"必须替换为浮动参数,以便宽度设置有效,水平菜单可以正常工作。

其他回答

我用几行javascript解决了这个问题。

$('a.menu_item').each(function() {
    let width = $(this).width();
    $(this).css('width',width + 'px');
});

如果粗体字体比常规字体宽,你也可以试试负边距。(不总是) 因此,我们的想法是使用类来设置: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;
}

希望我能帮上忙!

试试这个:

.nav {
  font-family: monospace;
}

我建议不要在hover时切换字体(°)。在这种情况下,只是菜单项移动了一点,但我曾见过由于扩大导致额外的换行导致整个段落重新格式化的情况。你不希望看到这种情况发生时,你所做的唯一的事情是移动光标;如果你什么都不做,页面布局应该不会改变。

在正常和斜体之间切换时也会发生偏移。我会尝试改变颜色,或者切换下划线,如果你有文字下面的空间。(下划线应该远离底部边框)

如果我在窗体设计课上使用切换字体,我会被嘘的:-)

字体这个词经常被误用。“Verdana”是一种字体,“Verdana normal”和“Verdana bold”是同一字体的不同字体。

我使用文本阴影解决方案,其他一些提到这里:

text-shadow: 0 0 0.01px;

不同之处在于我没有指定阴影颜色,所以这个解决方案适用于所有字体颜色。