链接标签<a href="">内的<div>标签

Question

链接标签<a href="">内的<div>标签

9

我想让一个 div 具有可点击性，但这个 <div> 里面还有另一个 <div>，也应该具有可点击性或链接。

HTML

<a href="#">
    <div class="box">
       <div class="plus"><img src="aaa.jpg"/></div>
    </div>
</a>

CSS

.box{
    float:left;
    width:100px;
    height:100px;
}
.plus{
    float:left;
    width:30px;
    height:30px;
}

我可以让两个<div>链接到不同的网页吗？

在 <a href> 中使用 <div> 是正确的方法吗？

- Kali Charan Rajput

能否将块元素制作成链接？ - Wai Wong

2

@Wai：我猜您问的是一个<a>是否可以像块级元素一样显示？如果是这样，是的。<a href="#" style="display: block;">blah</a>是完全有效的，并且非常常用。 - Jeremy Visser

是的，我知道，但我想知道是否可以在链接标签中嵌套块元素。（不确定我是否写得正确，英语不是我的母语） - Wai Wong

6个回答

25

不会的，被分配给包含的<a>的链接将被分配给其中的每个元素。

而且，这不是正确的方法。你可以让一个<a>像<div>一样工作。

一个示例^[演示]

CSS

a.divlink { 
     display:block;
     width:500px;
     height:500px; 
     float:left;
}

HTML

<div>
    <a class="divlink" href="yourlink.html">
         The text or elements inside the elements
    </a>
    <a class="divlink" href="yourlink2.html">
         Another text or element
    </a>
</div>

- Starx

我也想将文本或元素链接到另一个链接！ - Kali Charan Rajput

@kc rajput，一个<a>标签内不可能实现，请再次查看示例以获取可能的示例。 - Starx

3

这是一个典型的“divitis”案例——你不需要使用div来实现可点击，只需给a标签加上一个class。然后编辑该class的CSS属性，设置display:block，并像其他答案中提到的那样定义高度和宽度。

- whostolemyhat

这个页面上唯一聪明的人 - Alex Jones

2

'a'标签嵌套是不可行的。但是，如果您非常想保留结构并使其按您希望的方式工作，那么可以在JavaScript / jQuery中覆盖锚标签单击事件。

这样，您可以为两个事件监听器提供控制，并根据需要进行相应的操作。

- Wind Chimez

这个在 CSS 中像 z-index 一样改变是可能的吗？ - Kali Charan Rajput

2

不，这是一个结构性问题，而不是样式问题。 - Jeremy Visser

1

我认为你应该反过来做。先定义你的 Div，然后在每个 Div 中放置你的 a href，指向不同的链接。

- Julius A

是的，这两个div有不同的链接。 - Kali Charan Rajput

0

我只需要使用以下代码格式化两个不同的a标签：a { display: block; height: 15px; width: 40px; }。这样，您甚至不需要使用div标签...

- Fidi

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

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

- Adam Hollow · Accepted Answer

在HTML5中，可以将<a>元素包裹在<div>（或任何其他块元素）周围：

只要没有交互式内容（例如按钮或其他链接），就可以将a元素包围在整个段落、列表、表格等等甚至整个部分周围。

只需确保不将<a>放在另一个<a>（或<button>）中即可。