在悬停时以粗体显示的内联元素移动 [英] Inline elements shifting when made bold on hover

问题描述

我使用HTML列表和CSS创建了一个水平菜单。一切都按原样工作，除非你将鼠标悬停在链接上。您看到，我为链接创建了一个大胆的悬停状态，现在菜单链接因为粗体尺寸差异而移动。

我遇到了与此SitePoint帖子。但是，这个帖子没有正确的解决方案。我搜索到处的解决方案，找不到一个。
当然，我不能是唯一一个试图这样做的人。

有没有任何想法？

PS：我不知道菜单项中文本的宽度，所以我不能只设置li项的宽度。

这是我的代码：

HTML：

 < ul class = > 
< 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> 
  

CSS：

 code> .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：#ffffff; 
 margin-left：8px; 
 margin-right：5px; 
} 
 .nav li a：hover {
 text-decoration：none; 
 font-weight：bold; 
} 
 .nav li.first {border：none; }检查      http://jsfiddle.net/85LbG/\"> JSfiddle 。 
这个想法是为中的粗体（或任何：hover 状态样式）内容保留空格： 
 CSS：
  li，a {
 display：inline-block; 
 text-align：center; 
} 
 a：hover {
 font-weight：bold; 
} 
 a :: after {
 display：block; 
 content：attr（title）; 
 font-weight：bold; 
 height：1px; 
 color：transparent; 
 overflow：hidden; 
 visibility：hidden; 
 margin-bottom：-1px; 
} 
  
 HTML：
 < ul> 
< li>< a href =＃title =height> height< / a>< / li& 
< li>< a href =＃title =icon>图标< / a>< / li> 
< li>< a href =＃title =left>左< / a>< / li& 
< li>< a href =＃title =letter-spacing> letter-spacing< / a>< / li> 
< li>< a href =＃title =line-height> line-height< / a>< / li> 
< / ul> 
  
 
I created a horizontal menu using a HTML lists and CSS. Everything works as it should except when you hover over the links. You see, I created a bold hover state for the links, and now the menu links shift because of the bold size difference.

I encounter the same problem as this SitePoint post. However, the post does not have proper solution. I've searched everywhere for a solution and can't find one.
Surely I can't be the only one trying to do this.

Does anyone have any ideas?

P.S: I don't know the width of the text in menu items so I cannot just set the width of the li items.

This is my code:

HTML:
<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>
CSS:
.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: #ffffff; 
    margin-left: 8px; 
    margin-right: 5px; 
}
.nav li a:hover{ 
    text-decoration: none; 
    font-weight: bold; 
}
.nav li.first { border: none; }

解决方案
Check the working example on JSfiddle.
The idea is to reserve space for bolded (or any :hover state styles) content in :after pseudo element and using title tag as a source for content.

CSS:
li, a {
    display:inline-block;
    text-align:center;
}
a:hover {
    font-weight:bold;
}
a::after {
    display:block;
    content:attr(title);
    font-weight:bold;
    height:1px;
    color:transparent;
    overflow:hidden;
    visibility:hidden;
    margin-bottom:-1px;
}
HTML:
<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>


                        
这篇关于在悬停时以粗体显示的内联元素移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！