Question

我有一排均匀分布的导航项，如下所示：

enter image description here

当前选择的菜单项为粗体。设计师希望其他人在悬停时变为粗体斜体。当发生这种情况时，它会使该项目的文本更宽，这会使所有其他项目轻推，因为它们以固定边距内联显示。我必须摆脱轻推。

解决此问题的正确方法是什么？我有几个想法使用javascript：

Onload，将文本包装在div中，并将每个div的宽度设置为文本的宽度。
Onload，取每个菜单项相对于div的位置，然后用结果坐标将它们的位置设置为绝对（这样就可以了，因为它们总是在nav div中的相同绝对位置）。 / LI>

这两个看起来都有点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>

Answer 1

我不认为这个古老的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）;
通过将宽度设置为计算 outerWidth()（包括边距，填充和边框宽度），清除margin并设置{，可以使每个单独的项目保持居中{1}}至text-align。

直播示例on JSFiddle。

Answer 2

这是我的解决方案：

http://jsfiddle.net/pRhKF/10/

显然，您必须对其进行调整以使其适合您自己的代码。它使所有a具有它们将通过暂时加粗文本然后用粗体加粗而使其变为粗体的宽度。不幸的是，我还必须使用hover事件绑定器来实现鼠标效果，但也许你可以找到一种解决方法......

Answer 3

我个人喜欢给我的导航列表标记，然后给锚元素块显示宽度：

http://jsfiddle.net/9AEnv/

我漂浮了li，但你也可以给它们一个显示：如果你想避免漂浮，可以使用内联块。

Answer 4

对于后人来说，这是我最终得到的解决方案：http://jsfiddle.net/jmcdon10/UdJZ5/

主要基于@ Max的答案（这本身就是我第一次提出的解决方案的改编），但使用css hover而不是jQuery的悬停事件绑定器。

永久设置相对放置的项目的位置

4 个答案: