我有一排均匀分布的导航项，看起来像这样:
当前选择的菜单项是粗斜体。设计师希望其他人在悬停时变成粗斜体。发生这种情况时，它会使该元素的文本变宽，从而将所有其他元素推到上方，因为它们以固定边距内联显示。我必须摆脱轻推。
解决此问题的正确方法是什么？我有几个使用 javascript 的想法:
- 加载，将文本包裹在 div 中，并将每个 div 的宽度设置为文本的宽度。
- 加载时，获取每个菜单项相对于 div 的位置，然后使用结果坐标将它们的位置设置为绝对位置(这没问题，因为它们在导航 div 中始终处于相同的绝对位置)。
这两个看起来都有点 hackish，而且这是一个非常简单的问题，所以我认为一定有更简单的方法。
如果它有所作为，我会使用 jQuery。
以下是将重现该问题的相当小的 HTML 页面:
<head>
<style type="text/css">
body {
background: black;
font-family: sans-serif;
}
a {
margin: 0px 20px;
font-size: 16px;
color: white;
text-decoration: none;
}
a:hover {
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<a id="projectslink" href="#projects">Projects</a>
<a id="innovationslink" href="#innovations">Innovations</a>
<a id="newslink" href="#news">News</a>
<a id="aboutlink" href="#about">About</a>
<a id="contactlink" href="#contact">Contact</a>
<a id="breathlink" href="#">Breath*</a>
</body>
最佳答案
我认为这个由来已久的 CSS 问题没有优雅的解决方案...我可以想到两种“hackish”CSS 解决方案可供选择:
- 给元素
display: block-inline和固定宽度(在em中，当然是为了防止字体缩放/缩放问题)。如果内边距看起来一致，宽度将因元素而异。 - 隐藏文本并将其替换为图像。
在我看来，您的第一个解决方案(设置固定宽度 onload)还不错。不乱用 position “感觉是对的”，至少比其他选择要安全得多。
澄清一下，这就是我将如何实现您的第一个解决方案:
HTML:无变化
CSS:没有变化
JavaScript:
$(function() {
$('a').each(function() {
var menuItem = $(this);
menuItem.css({
'display': 'inline-block',
'width': menuItem.outerWidth(true),
'margin': 0,
'text-align': 'center'
});
});
});
如你所见:
- 无需将菜单项包裹在div中(只需在JS中设置
display: block-inline)； - 通过将宽度设置为 computed
outerWidth()(包括边距、填充和边框宽度)，清除可以使每个单独的元素保持居中margin并将text-align设置为center。
实例on JSFiddle .
关于javascript - 永久设置相对放置元素的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8874507/