Question

我的导航菜单工作正常。但是当我将选定的类应用于导航列表中除“主页”链接之外的任何项目时，它会将我的导航菜单推送到两行。我已经尝试了所有的东西，但似乎无法解决问题。

这也只发生在Chrome中。我在Windows和Mac上的Firefox上试过它，它运行得很好。

我尝试在About的末尾添加一个斜杠，这似乎推出了'About'这个词，但是斜线仍然在第二行。

有人可以帮忙吗？我似乎无法弄清楚这一点。

我正在谈论的图片：

error

这是我选择主页的菜单代码：

<div id="navigation"> <!-- Start navigation -->
                    <ul>
                        <li><a class="selected" href="index.html">Home \</a></li>
                        <li><a href="#">Shop <span>\</span></a></li>
                        <li><a href="collection.html">Collection <span>\</span></a></li>
                        <li><a href="#">Press <span>\</span></a></li>
                        <li><a href="#">Video <span>\</span></a></li>
                        <li><a href="about.html">About</a></li>
                    </ul>

以下是选中“关于”链接的代码：

<div id="navigation"> <!-- Start navigation -->
                    <ul>
                        <li><a href="index.html">Home <span>\</span></a></li>
                        <li><a href="#">Shop <span>\</span></a></li>
                        <li><a href="collection.html">Collection <span>\</span></a></li>
                        <li><a href="#">Press <span>\</span></a></li>
                        <li><a href="#">Video <span>\</span></a></li>
                        <li><a class="selected" href="about.html">About</a></li>
                    </ul>
                </div> <!-- End navigation -->

CSS：

#navigation { clear: both; float: right; margin-top: 30px; }
#navigation ul li { display: inline; margin-right: 10px; }
#navigation ul li a { font-family: "Lucida Console"; font-size: 19px; color: #B3B3B3; text-decoration: none; text-transform: uppercase; }
#navigation ul li a span { font-size: 12px; vertical-align: middle; }
#navigation ul li a.selected { color: #6a6a6a; }

Answer 1

我认为正在申请一个班级。选择你缺席。 about链接对我来说看起来更大。你有没有在Firebug中进行过检查？

选定的类将关闭导航菜单

1 个答案: