Question

我有以下代码：

<ul> 
     <a href="./index.php?profile=User1">
        <li>User1 : 16</li>
     </a>
     <a href="./index.php?profile=User2">
        <li>User2 : 4</li>
    </a>
</ul>

这在所有主流浏览器中都很好用，但它不允许/无效HTML，正确的方法应该是：

<ul>
    <li> 
        <a href="./index.php?profile=User1">User1 : 16</a>
    </li>
    <li> 
        <a href="./index.php?profile=User2">User2 : 4</a>
    </li>
</ul>

但是，如果我像第二个例子那样做，那么整个<li>的文本就像我想要的那样是可点击的。
我应该使用无效的工作版本还是有人有更好的解决方案？

Answer 1

使用CSS使链接占用整个列表项，例如。 display: block（以及您可能想要的任何其他样式）。

环绕列表项的链接是无效的HTML。

Answer 2

简短回答是否，它不会被验证，只有li可以在ul和ol元素内。

所以这是不正确的

<ul>
  <a><li></li></a>
</ul>

这很好

<ul>
  <li><a></a></li>
</ul>

Answer 3

锚标记是内联元素，因此请使用 display：'block'进行阻止，以便它占据其父级的全宽，即li标记

Answer 4

第二种方法是正确的方法，你只是有一些小的样式问题。

如果您将<li>设置为没有填充且<a>没有边距，则链接将填充列表项的整个区域。

Answer 5

你必须使用有效的方法。

并将“a”标记设置为：

display: block

http://jsfiddle.net/TYVV6/1/

如果您不想在列表元素的开头显示点。

你必须使用：

list-style: none;

我可以使用<a> in <ul> around <li></li></ul></a>

5 个答案: