2

所以，我正在处理的网站有一个水平导航菜单。这是相关的代码。

HTML：

<div class="nav">
<ul>
    <a href="index.html">
        <li>Home</li>
    </a>
    <a href="about.html">
        <li>About Us</li>
    </a>
    <a class="active" href="perspective.html">
        <li>Our Perspective</li>
    </a>
</ul>

CSS：

.nav ul a li{
    padding: 5px 15px;
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: inline-block;
}

.nav ul a{
    color: #1d1d1d;
    text-decoration: none;
    font: bold .8em Georgia, "Times New Roman", Times, serif;
}

.nav ul a:hover li{
    background-color: rgba(0, 0, 0, 0.44);
    opacity: 1;
    -moz-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
    -webkit-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
    box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
}

.nav ul a.active li{
    background-color: rgba(0, 0, 0, 0.44);
    opacity: 1;
    -moz-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
    -webkit-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
    box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
}

您可以在此处查看该网站：pc.kraigh.com

因此，出于某种原因，每隔一段时间，列表将垂直呈现，而不是水平呈现。此外，有时（但不总是）每个 li 上都会有项目符号，好像浏览器忽略了 list-style:none。

我的 CSS 选择器是否有问题导致此问题？为什么它只会每隔一段时间发生一次？

注意：要使错误重现，请尝试快速更改页面或刷新页面几次。这是一个（链接到a）屏幕截图，以证明它有时会发生！

错误截图（Imgur 链接）

编辑：好的，我现在明白它需要去<ul><li><a>，但是，我希望整个<li>区域都是可点击的——不仅仅是链接文本。有没有办法做到这一点？

4

3 回答 3

1

<li>需要是 的直接子代<ul>：

这是对的：

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About Us</a></li>
  <li><a class="active" href="perspective.html">Our Perspective</a></li>
</ul>

您可以分配一个widthandline-height以<li>使其完全可点击。还有，padding有帮助。

于 2012-04-23T23:01:01.983 回答
0

我怀疑这与您使用标签包装<li>元素的事实有关。<a>

应该<ul><li><a>

<li>标签应该只是持有者，标签应该是可<a>点击的部分。玩弄风格，也许像display: block; padding: 10px;

于 2012-04-23T22:59:12.483 回答
0

JSFiddle 示例：

http://jsfiddle.net/ZCnbB/2/

<div class="nav">
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a class="active" href="perspective.html">Our Perspective</a></li>
</ul>
</div>​

我稍微修改了css：

.nav ul {
    display: block;
    text-align: center;
}

.nav ul li {
    display: inline-block;
}
于 2012-04-23T23:01:29.540 回答