如何制作有效<li>链接

我正在尝试制作一个无序列表，其中列表项是链接，而不仅仅是其中的文本。但这是无效的。用 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>的最佳方法是什么？

此格式无效

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

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

1）添加点击事件 <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包裹在锚点中，如果你只想让li中的所有内容都可选，而不仅仅是文本，你可以使用CSS来实现这一点。从 li 标签中删除任何明确的填充，并使锚点显示块。

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

这将强制锚点填充 LI，从而使整个事情可点击。

锚点

不能包含 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;
}

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

这是无法收到错误消息的语法

用

下面的代码替换你的代码，你需要将 href 元素包装在 li 中。

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

因为缺少用 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>

相关内容

最新更新

热门标签：