Question

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

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选择器是否有问题造成这种情况？为什么它只会偶尔发生一次？

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

Screenshot of Error (Imgur link)

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

Answer 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>

您可以为width分配line-height和<li>，使其完全可点击。此外，padding有帮助。

Answer 2

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

应为<ul><li><a>

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

Answer 3

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;
}

为什么这个CSS“菜单”有时会垂直渲染而不是水平渲染？

3 个答案: