嵌套的HTML标记

Question

大脑冻结......

我想这样做：

<li>
 <a>
  <p>text</p>
  <p class="x">text</p>
 </a>
</li>

我知道我做不到。那我该怎么办？ （没有JS / jQuery等）

Answer 1

将<p>更改为某个内联元素（例如<span>）并为li a span提供display: block;样式，我猜。

<li>
 <a>
  <span>text</span>
  <span class="x">text</span>
 </a>
</li>

Answer 2

你可以在HTML（5）中做到这一点。但是在某些浏览器（Firefox）中支持很多。请参阅：http://html5doctor.com/block-level-links-in-html-5/

最好的方法是使用自然内联元素，例如<span> s而不是锚点内的块级元素。

Answer 3

这验证为XHTML 1.1：

  <li>
   <p><a href="example.com">text</a></p>
   <p class="x"><a href="example.com">text</a></p>
  </li>

Answer 4

我假设你得到的是你想要列表项中的整个文本块，也许整个列表项是可点击的吗？

首先，段落标记是块级项目，但锚标记本质上是内联元素。你不能把它放在一个锚标签内，它在语义上是正确的，它不会验证。做这样的事情：

<ul class="myList">
<li>
  <a href="#">
      <strong>This is the title</strong>
      <span>This is the link text</span>
  </a>
</li>
</ul>

假设您希望列表项的整个区域可以单击，则可以应用display：block;使用css到锚标签。请注意，如果您为列表项指定了不同的高度并希望所有内容都可以点击，则还需要在标记上设置高度。

.myList a { display:block; }

如果您希望强标记断行（链接中的“主文本”）......

.myList a strong { display:block;}

希望有所帮助！