在锚中放置div是否正确?

我听说在内联元素中放入块元素是一种HTML错误:

<a href="http://example.com">
    <div>
        What we have here is a problem. 
        You see, an anchor element is an inline element,
        and the div element is a block level element.
    </div>
</a>

但是如果在样式表中将外部锚设置为display:block呢?还是错的吗?关于块级和内联元素的HTML 4.01规范似乎是这样认为的:

样式表提供了实现的方法指定任意的呈现元素，包括是否为元素呈现为块或内联。在有些情况，比如内联样式对于列表元素，这可能是恰当，但总的来说，不鼓励作者超越常规 HTML元素的解释这种方式。

有没有人对这个问题有进一步的建议?

当前回答

仅供参考。

如果你的目标是让你的div可点击，你可以使用jQuery / Java Script。

像这样定义你的div:

<div class="clickableDiv" style="cursor:pointer">
  This is my div. Try clicking it!
</div>

然后你的jQuery将像这样实现:

 <script type="text/javascript">

    $(document).ready(function () {

        $("div.clickableDiv").click(function () {
            alert("Peekaboo"); 
        });
    });
</script>

这也适用于多个潜水-根据汤姆的评论在这个线程

2012-05-02 13:50:14

其他回答

2023年1月更新:最新HTML5版本

Nothing is wrong with placing a div inside a tag. In fact, you can place just about anything inside a tag as long as they are categorized as transparent, except that no descendant may be interactive content (eg: buttons or inputs) or an a element, and no descendant may have a specified tabindex attribute. Please refer to these documentations: https://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html#the-a-element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#properties. If you inspect Angular Material official website, you can tell that they are indeed using div inside a element.

这是我从他们的网站上截取的一个例子:

<a href="/components/badge">
  <div class="mat-list-item-content">
    <div mat-ripple="" class="mat-ripple mat-list-item-ripple"></div>
    <div class="mat-list-text"></div>
  </div>
</a>

2021-11-15 08:12:40

你可以通过添加"::before"伪元素来实现

纯CSS技巧;)

a:before{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: auto; content: ""; background-color: rgba(0,0,0,0); } <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="card" style="width: 18rem;"> <img src="https://via.placeholder.com/250" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card with stretched link</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary stretched-link">Go somewhere</a> </div> </div>

2020-05-30 15:30:41

不，它不会验证，但它通常会在现代浏览器中工作。也就是说，在你的锚中使用一个span，并在它上设置display: block，这肯定会在任何地方工作，它会验证!

2009-12-01 18:34:49

任何方法都有用……直到你把它们嵌在一起。

你可以把表格、div、鸟和蜜蜂塞进去，浏览器会耐心地配合你。但是一旦你把另一个<a>标签放在里面，它就会把它们分开，把里面的标签放在外面的标签关闭之后。这值得一试，即使是在F12控制台，当你的浏览器不喜欢某些东西时，你会惊讶地发现它是多么严格。

所以没有这样的事情:

<a href="#1">
    <a href="#2"> Now what </a>
</a>

相反，它将变成:

<a href="#1"></a>
<a href="#2"> Now what </a>

同样的事情发生在<p>和其他一些;事实上，有一篇关于这个的Stacko文章-我可以嵌套这些标签吗?-唯一的答案有关键，在“HTML规范指示”部分寻找项目符号列表。最挑剔的显然是a和p，如h1..h6。(现在让我们诚实地说:你是否曾经专门使用p标签，因为它给了你别人没有的东西?……这么想的。我就把它扔了。)

TL, DR，你不能把a放在a里面。

2022-08-18 22:18:38