如何创建一个有效的<li>链接

Question

如何创建一个有效的<li>链接

6

我正在尝试创建一个无序列表，其中列表项是链接，而不仅仅是它们内部的文本。但这是无效的。当我使用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>？

- ryanr

1

可能是使用正确的HTML将整个<li>作为链接的重复问题。 - Liglo App

您可以像这样添加onClick事件：<li onclick='window.location.href="http://google.com"'>点击此处</li> - Mitul

可能是重复的问题：验证错误：在此上下文中，元素a不允许作为元素ul的子元素。（抑制此子树中的进一步错误。） - Liam

6

五个人在没有回答实际问题的情况下设法发布了完全相同的答案。太不可思议了。发帖者知道 <li><a></a></li> 是构造元素的有效方式——这一点在原始标记中得到体现。问题不在于如何有效地嵌套元素，而在于如何使用有效标记实现特定布局（而非性能）。 - BoltClock

1

问题不太清楚。 - Liam

@Liam：除了使用了“性能”一词而实际上指的是布局之外，最后两段对我来说似乎非常清晰。也许需要更改标题。 - BoltClock

7个回答

7

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

1) 将onclick事件添加到li上，例如 <li onclick='window.location.href="你的链接"'>你的文本</li>

2) 在li内添加标签，并按如下方式为标签添加css

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

li a{
    display:block;
}

第二个选项覆盖li元素的内部区域

- Mitul

6

如果你只是希望使li标签内的所有内容可选而不仅仅是文本，那么你不能将li标签包裹在锚点中。你可以使用CSS实现这一目的。移除li标签的任何默认填充，并将锚点设置为块级元素。

li {
    padding: 0;
}

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

这将强制锚点填充li，从而使整个内容可点击。

- Mike Oram

-1

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

- sonam gupta

-4

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

这是语法，您将不会收到错误消息。

- kaushik dey

-4

请使用以下代码替换您的代码，您需要将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>

- stanze

请问您能否在给出负评的同时，添加一条正面评价的评论，说明为什么会对该回答进行负面评价呢？ - stanze

-5

因为您忘记使用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>

- Bhojendra Rauniyar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Muhammet · Accepted Answer

这个格式是无效的

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