Question

在my website上，当您访问主页时，菜单看起来很不错。只要打开其中一个菜单，所选菜单就会变为粗体，最后一个菜单项会跳转到下面一行。

我希望菜单显示在一行而不是跳到下面的行，但我似乎找不到那个scr *部分让我过来的部分。任何人都有任何建议或知道什么是错的？

Answer 1

您可以通过添加不可见的after内容为粗体字体预留空间。这是JSFiddle http://jsfiddle.net/2r4xby06/1（演示正在悬停）

CSS：

ul {
    font:normal 16px Arial;
}

li, a {
    display: inline - block;
    text - align: center;
}
a {
    padding: 4px 8px;
    text - decoration: none;
    color: #333;
    text-transform: uppercase;
}

a:hover {
    font-weight:bold;
}

a::after {
    display:block;
    content:attr(title);
    font-weight:bold;
    height:1px;
    color:transparent;
    overflow:hidden;
    visibility:hidden;
    text-transform: uppercase;
}

HTML：

<ul>
    <li><a href="#" title="Home">Home</a></li>
    <li><a href="#" title="Ploegen">Ploegen</a></li>
    <li><a href="#" title="VOOR DE JONGSTEN">VOOR DE JONGSTEN</a></li>
    <li><a href="#" title="KALENDER/STAND">KALENDER/STAND</a></li>
</ul>

Answer 2

更改此

#access .current_page_item > a, #access .current_page_ancestor > a
{
  font-weight: bold;
}

要

#access .current_page_item > a, #access .current_page_ancestor > a { font-weight: normal; }

或

#access ul { font-size: 13px; list-style: none; margin: 0 0 0 3em; /*set this to 3em or 3.6em*/ padding-left: 0; border: 1px solid red; }

或

#access a { color: #eee; display: block; line-height: 3.333em; padding: 0 1em; /*set this to 1.2125em to 1em*/ text-decoration: none; }

Answer 3

#access div {
  margin: 0px 8%;
}

这将解决问题。

当其中一个<li>为粗体时，它会溢出（宽度变大），导致无法满足边距参数。因此，请删除粗体或调整边距。

菜单调整到下面的行而不是全宽

3 个答案: