Question

我在ul里面添加一个锚标签，在锚标签里面我正在添加li。但是当我在html验证器上测试它时，它给了我错误。有没有正确的方法来实现这一目标？

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<ul>
<a href="#"><li>Click one</li></a>
<a href="#"><li>Click one</li></a>
<a href="#"><li>Click one</li></a>
</ul>
</body>
</html>

Answer 1

将其转换为：

<ul>
    <li><a href="#">Click one</a></li>
    <li><a href="#">Click one</a></li>
    <li><a href="#">Click one</a></li>
</ul>

由于li的父级应始终为ul，因此导致错误。但我认为你希望你的整个li可以点击，所以这种CSS风格会修复它。

ul li a { display:block; }

将显示它。

Answer 2

这个问题已经很老了，但我想补充一点：

这个CSS也应该强制锚元素与父li的宽度和高度相同，这也会达到预期的效果。

ul li a {
    width:inherit;
    height:inherit;
}

Answer 3

如果您设置li的样式，则可以点击整个li a，如下所示：

ul li a {
    float: left;
    margin: 5px;
    padding: 5px;
    background: red;
}

Answer 4

您应该将<li>标记放在<a>标记之外，而不是相反。

在li之前的ul里面的锚标签

4 个答案: