我使用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>


当前回答

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

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

其他回答

jquery中的一行:

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

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

你可以使用"margin"属性:

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

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

只要确保左右边距足够大,以便额外的空间可以包含粗体文本。对于较长的单词,可以选择不同的页边距。 这只是另一种解决方法,但为我做了工作。

我固定菜单时,悬停粗体成功。它支持响应式,这是我的代码:

(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);

折衷的解决方案是使用文本阴影来伪装粗体,例如:

文字阴影:0 0 0.01px黑色;

为了更好地进行比较,我创建了以下示例:

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>

传递给文本阴影非常低的模糊半径值将使模糊效果不那么明显。

一般来说,你重复的文字阴影越多,你的文字就会变得越粗壮,但同时也会失去字母的原始形状。

我应该警告你,将模糊半径设置为分数并不会在所有浏览器中呈现相同的效果!例如,Safari需要更大的值来呈现它,就像Chrome一样。

如果您不能设置宽度,那么这意味着宽度将随着文本变得粗体而改变。除了修改每个状态的填充/边距之类的妥协,没有办法避免这种情况。