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


当前回答

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

希望我能帮上忙!

其他回答

我真的无法忍受有人告诉你不要那样做,而其实有一个简单的解决方法。我不确定li元素,但我刚刚修复了相同的问题。我有一个由div标签组成的菜单。

只需将div标签设置为“display: inline-block”。内联,所以他们坐在彼此和块,你可以设置宽度。只需要设置足够宽的宽度来容纳粗体文本,并使文本居中对齐。

(注意:它似乎剥离了我的html[下面],但每个菜单项都有一个div标签围绕它与corrasponding ID和类名searchbar_category。ie: <div id="ROS_SearchSermons" class="SearchBar_Category">

超文本标记语言 (我有锚标签包装每个菜单项,但我不能提交他们作为一个新用户)

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

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

text-shadow: 0 0 0.01px;

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

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

我结合了上面的一些技术来提供一些东西,如果关闭js,它不会完全糟糕,如果使用jQuery,效果会更好。现在浏览器对亚像素字母间距的支持正在改进,使用它真的很好。

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>

通过使用一个不可见的伪元素预先设置宽度,该伪元素具有与父悬停样式相同的内容和样式。使用数据属性(如title)作为内容的源。

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; } /* SOLUTION */ /* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */ 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>