Html 悬停时加粗时内联元素移动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/556153/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inline elements shifting when made bold on hover
提问by Billy
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.
我使用 HTML 列表和 CSS 创建了一个水平菜单。一切正常，除非您将鼠标悬停在链接上。你看，我为链接创建了一个粗体悬停状态，现在菜单链接由于粗体大小差异而发生变化。
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.
我遇到了与此 SitePoint 帖子相同的问题。但是，该帖子没有适当的解决方案。我到处寻找解决方案，但找不到。当然，我不能是唯一一个尝试这样做的人。
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.
PS：我不知道菜单项中文本的宽度，所以我不能只设置 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>回答by 350D
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;
}
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>Check the working example on JSfiddle.
The idea is to reserve space for bolded (or any :hoverstate styles) content in :beforepseudo element and using title tag as a source for content.
检查JSfiddle上的工作示例。这个想法是为伪元素中的粗体（或任何:hover状态样式）内容保留空间，:before并使用标题标签作为内容的来源。
回答by Stefan J
A compromised solution is to fake bold with text-shadow, e.g:
一个折衷的解决方案是用文本阴影伪造粗体，例如：
text-shadow: 0 0 0.01px black;
文本阴影：0 0 0.01px 黑色；
For better comparison I created these examples:
为了更好地比较，我创建了这些示例：
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>Passing to text-shadowreally low value for blur-radiuswill make the blurring effect not so apparent.
传递到text-shadow非常低的值blur-radius会使模糊效果不那么明显。
In general the more your repeat text-shadowthe bolder your text will get but in the same time loosing original shape of the letters.
一般来说，你的重复越多，你text-shadow的文字就会越粗，但同时会失去字母的原始形状。
I should warn you that setting the blur-radiusto fractions is not going to render the same in all browsers! Safari for example need bigger values to render it the same way Chrome will do.
我应该警告您，将 设置blur-radius为分数不会在所有浏览器中呈现相同的效果！例如，Safari 需要更大的值才能以与 Chrome 相同的方式呈现它。
回答by Andrew Vit
If you cannot set the width, then that means the width will change as the text gets bold. There is no way to avoid this, except by compromises such as modifying the padding/margins for each state.
如果您无法设置宽度，则意味着宽度会随着文本变粗而改变。没有办法避免这种情况，除非妥协，例如修改每个状态的填充/边距。
回答by John Magnolia
Another idea is using letter-spacing
另一个想法是使用 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>回答by Alex
Oneline in jquery:
一个在jQuery的行：
$('ul.nav li a').each(function(){
$(this).parent().width($(this).width() + 4);
});
edit:While this can bring about the solution, one should mention that it does not work in conjunction with the code in the original post. "display:inline" has to be replaced with floating-parameters for a width-setting to be effective and that horizontal menu to work as intended.
编辑：虽然这可以带来解决方案，但应该提到它不能与原始帖子中的代码结合使用。"display:inline" 必须替换为浮动参数才能使宽度设置有效并使水平菜单按预期工作。
回答by Mr. Alien
CSS3 Solution - Experimental
CSS3 解决方案 - 实验
（假冒的胆量）Thought to share a different solution which no one suggested here. There's a property called text-strokewhich will be handy for this.
想分享一种不同的解决方案，这里没有人建议。有一个名为的属性text-stroke，这将很方便。
p span:hover {
-webkit-text-stroke: 1px black;
}<p>Some stuff, <span>hover this,</span> it's cool</p>Here, I am targeting the text inside of the spantag and we stroke it by a pixel with blackwhich will simulate boldstyle for that particular text.
在这里，我将span标签内的文本作为目标，我们通过一个像素对其进行描边，该像素black将模拟bold该特定文本的样式。
Note that this property is not widely supported, as of now (while writing this answer), only Chrome and Firefox seems to support this. For more information on browser support for text-stroke, you can refer to CanIUse.
请注意，此属性并未得到广泛支持，截至目前（在撰写此答案时），似乎只有 Chrome 和 Firefox 支持此属性。有关浏览器支持的更多信息text-stroke，您可以参考CanIUse。
Just for sharing some extra stuff, you can use -webkit-text-stroke-width: 1px;if you are not looking to set a colorfor your stroke.
只是为了分享一些额外的东西，-webkit-text-stroke-width: 1px;如果你不想color为你的笔画设置一个，你可以使用。
回答by Daniele B
I just solved the problem with the "shadow" solution. It seems the most simple and effective.
我刚刚用“影子”解决方案解决了这个问题。这似乎是最简单有效的。
nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
text-shadow:0 0 1px white;
}
No need to repeat the shadow three times (result was the same for me).
不需要重复阴影三次（结果对我来说是一样的）。
回答by monk
You could use somehting like
你可以使用类似的东西
<ul>
<li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>
and then in your css just set the span content bold and hide it with visibility: hidden, so that it keeps its dimensions. Then you can adjust margins of the following elements to make it fit properly.
然后在您的 css 中将跨度内容设置为粗体并使用可见性隐藏它：隐藏，以便它保持其尺寸。然后您可以调整以下元素的边距以使其适合。
I am not sure if this approach is SEO friendly though.
我不确定这种方法是否对 SEO 友好。
回答by monk
I had a problem similar to yours. I wanted my links to get bold when you hover over them but not only in the menu but also in the text. As you cen guess it would be a real chore figuring out all the different widths. The solution is pretty simple:
我遇到了和你类似的问题。我希望我的链接在您将鼠标悬停在它们上面时变得粗体，但不仅在菜单中，而且在文本中。正如您猜测的那样，弄清楚所有不同的宽度将是一件真正的苦差事。解决方案非常简单：
Create a box that contains the link text in bold but coloured like your background and but your real link above it. Here's an example from my page:
创建一个框，其中包含粗体链接文本，但颜色与您的背景相似，但在其上方是真实链接。这是我页面上的一个例子：
CSS:
CSS：
.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }
Of course you need to replace #FFFFE0 by the background colour of your page. The z-indices don't seem to be necessary but I put them anyway (as the "hypo" element will occur after the "hyper" element in the HTML-Code). Now, to put a link on your page, include the following:
当然，您需要将#FFFFE0 替换为页面的背景颜色。z 索引似乎不是必需的，但我还是把它们放进去了（因为“hypo”元素将出现在 HTML 代码中的“hyper”元素之后）。现在，要在您的页面上放置链接，请包含以下内容：
HTML:
HTML：
You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>
The second "here" will be invisible and hidden below your link. As this is a static box with your link text in bold, the rest of your text won't shift any longer as it is already shifted before you hover over the link.
第二个“此处”将不可见并隐藏在您的链接下方。由于这是一个静态框，您的链接文本以粗体显示，因此您的其余文本将不再移动，因为它在您将鼠标悬停在链接上之前已经移动了。
Hope I was able to help :).
希望我能帮上忙:)。
So long
太长
回答by Martin Horvath
You can work with the "margin" property:
您可以使用“margin”属性：
li a {
margin: 0px 5px 0px 5px;
}
li a:hover {
margin: 0;
font-weight: bold;
}
Just make sure that the left and right margin are big enough so the extra space can contain the bold text. For long words, you might choose different margins. It's just another workaround but doing the job for me.
只要确保左边距和右边距足够大，这样额外的空间就可以包含粗体文本。对于长词，您可以选择不同的边距。这只是另一种解决方法，但为我做这项工作。
