首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >内联元素在悬停时显示为粗体时移动

内联元素在悬停时显示为粗体时移动
EN

Stack Overflow用户
提问于 2009-02-17 10:00:59
回答 22查看 201.9K关注 0票数 243

我使用HTML列表和CSS创建了一个水平菜单。除了当你将鼠标悬停在链接上时,一切都会正常工作。您看,我为链接创建了一个粗体悬停状态,现在由于粗体大小的差异,菜单链接发生了变化。

我遇到了和this SitePoint post一样的问题。然而,该帖子没有适当的解决方案。我到处寻找解决方案,但没有找到。当然,我不能是唯一一个这样做的人。

有谁有什么想法吗?

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

EN

回答 22

Stack Overflow用户

发布于 2014-10-21 06:37:49

另一个想法是使用letter-spacing

li, a { display: inline-block; }
a {
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
  letter-spacing: 0.235px
}

a:hover, a:focus {
  font-weight: bold;
  letter-spacing: 0
}
<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

票数 36
EN

Stack Overflow用户

发布于 2009-02-17 10:09:29

如果您不能设置宽度,则意味着宽度将随着文本变粗而更改。没有办法避免这一点,除非通过妥协,例如修改每个状态的填充/边距。

票数 28
EN

Stack Overflow用户

发布于 2012-12-04 19:17:44

你可以使用像这样的东西

<ul>
   <li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>

然后在css中,只需将span内容设置为粗体,并使用visibility: hidden将其隐藏,这样它就可以保持其尺寸不变。然后,您可以调整以下元素的边距以使其适合。

我不确定这种方法是否对SEO友好。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/556153

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档