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


当前回答

CSS3解决方案-实验性(假大胆)

想分享一个不同的解决方案,没有人在这里建议。有一个属性叫text-stroke,它会很方便。

P跨度:悬停{ -webkit-text-stroke: 1px黑色; } <p>一些东西,< span>hover this,</span> it's cool</p>

在这里,我针对span标签内的文本,我们用黑色像素描边它,这将模拟该特定文本的粗体样式。

注意,这个属性还没有得到广泛的支持,到目前为止(在写这个答案的时候),似乎只有Chrome和Firefox支持这个属性。有关浏览器支持文本笔画的更多信息,可以参考CanIUse。


只是为了分享一些额外的东西,你可以使用-webkit-text-stroke-width: 1px;如果你不打算为你的笔画设置颜色。

其他回答

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

使用字母间距和文本阴影:

a {
  letter-spacing: .1em;
}

a:hover {
  text-shadow: 0 0 .9px #color, 0 0 .9px #color, 0 0 .9px #color;
}

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

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

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

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

最好使用a::before而不是a::after,就像这样:

.breadcrumb { margin: 0; padding: 0; list-style: none; overflow: hidden; } .breadcrumb li, .breadcrumb li a { display: inline-block; } .breadcrumb li:not(:last-child)::after { content: '>'; /* or anything else */ display: inline-block; } .breadcrumb a:hover { font-weight: bold; } .breadcrumb a::before { display: block; content: attr(data-label); font-weight: bold; height: 0; overflow: hidden; visibility: hidden; } <ul class="breadcrumb"> <li><a data-label="one" href="https://www.google.fr/" target="_blank">one</a></li> <li><a data-label="two" href="https://duckduckgo.com/" target="_blank">two</a></li> <li><a data-label="three" href="#">three</a></li> </ul>

详情请访问:https://jsfiddle.net/r25foavy/

我真的无法忍受有人告诉你不要那样做,而其实有一个简单的解决方法。我不确定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;
}