Question

我正在尝试创建一个无序列表，其中列表项是链接，而不仅仅是其中的文本。但这不是有效的。使用https://validator.w3.org/check检查我的代码时，我会收到消息

元素a在此上下文中不允许作为元素ul的子元素。

这是代码：

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
        ul {
            list-style:none;
        }
        a {
            text-decoration:none;
            color: #212121;
            font-size: 1em;
            font-family: Arial, Helvetica, sans-serif;
        }
        #container {
            padding:20px;
        }

        .valid {
            background-color:blanchedalmond;
        }

        .invalid {
            background-color:aquamarine;
        }

        .nav-item {
            width:120px;
            height:34px;
            margin:4px;
            line-height:34px;
            text-align:center;
            border: solid 1px #212121;
        }
    </style>
</head>
<body>

    <div id="container">
        <ul>
            <li class="valid nav-item"><a href="index.html">valid</a></li>
            <a href="index.html"><li class="invalid nav-item">invalid</li></a>
        </ul>
    </div>
</body>
</html>

<a><li></li></a>的无效排列是我想要实现的行为方式，整个<li>元素可以选择作为链接。

如果我想维护有效代码，那么实现可选<li>的最佳方式是什么？

Answer 1

此格式无效

<a href="index.html"><li class="invalid nav-item">invalid</li></a>

有效格式为

 <li class="invalid nav-item"><a href="index.html">valid</a></li>

至于你的关注点填补li的空间，小css技巧将解决它。

a {
 text-decoration: none;
 display: block;
 width: 100%;
 height: 100%;
}

Answer 2

有两种方法可以让li文本可点击

1）添加onlclick事件 <li onclick='window.location.href="Your Link"'>Your Text</li>

2）在li中添加一个标签，然后将css添加到标签中，如下所示

<li><a href='your link'>Your Text</a></li>

li a{
    display:block;
}

第二个选项涵盖了li的内部区域

Answer 3

你不能将你的李包裹在一个锚中，如果你想要的只是让你的所有内容都可以选择而不仅仅是文本，你可以使用CSS实现这一点。从li标签中移除任何defualt填充，并使你的锚点显示阻止。

li {
    padding: 0;
}

a {
    display: block;
    width:120px;
    height:34px;
}

这将强制锚点填充li，从而使整个事物可以点击。

Answer 4

锚不能包含li作为其子元素，因此您必须将锚标记放在li元素中：

 <ul>
    <li class="valid nav-item"><a href="index.html">valid</a></li>
    <li class="invalid nav-item"><a href="index.html">invalid</a></li>
 </ul>

用这个替换你的ul。
并添加css：

li a{
 display:block;
}

Answer 5

 <div id="container">
    <ul>
        <li class="valid nav-item"><a href="index.html" title="valid">valid</a></li>
        <li class="invalid nav-item"><a href="index.html" title="invalid">invalid</a></li>
    </ul>
</div>

这是您无法获取错误消息的语法

Answer 6

使用以下代码替换您的代码，您需要在li。

中包装href元素

<div id="container">
    <ul>
        <li class="valid nav-item"><a href="index.html">valid</a></li>
        <li class="invalid nav-item"><a href="index.html">invalid</a></li>
    </ul>
</div>

Answer 7

因为您缺少用li标签包装标签：

替换它：

<ul>
   <li class="valid nav-item"><a href="index.html">valid</a></li>
   <a href="index.html"><li class="invalid nav-item">invalid</li></a>
</ul>

有了这个：

<ul>
   <li class="valid nav-item"><a href="index.html">valid</a></li>
   <li class="invalid nav-item"><a href="index.html">invalid</a></li>
</ul>

如何制作有效的<li>链接

7 个答案: