如何将标签扩展为标签？[英]How can I expand an tag into a Tag? 本文翻译自 Tareq 查看原文 2011-12-12 2353 css/

I have the following div:

我有以下div:

<div style="height: 200px">
    <a href="#">Click to View</a>
</div>

I want to click anywhere of the div tag and want to activate the tag means in short I want to click on the Div to navigate the link. How can I do that?

我想点击div标签的任何地方,并希望激活标签意味着我想点击Div来浏览链接。我怎样才能做到这一点?

Thanks in advance for helping me.

在此先感谢帮助我。

UPDATE:

Sorry friends, I have to update my question...

对不起朋友,我要更新我的问题......

I can not define the exact height of my <div>

我无法定义

的确切高度

I have to use 100% for height for <a>

对于,我必须使用100%的高度

My revised code is like that:

我修改后的代码是这样的:

<div>
    abc<br><br>        
    <a href="#">Click to View</a>
</div>

Please help me...

请帮帮我...

7 个解决方案

#1

Make a Javascript function which calls the Link and attach it on the OnClick event of the DIV Element.

创建一个调用链接的Javascript函数,并将其附加到DIV元素的OnClick事件上。

Or try something like:

或尝试类似的东西:

<div id="Idhere" onclick="window.location = 'Link here'">
<a href="leave this blank">text here</a>
</div>

#2

This should do the trick for you

这应该是你的伎俩

div {
  height: 200px;
}

div a {
  display: block;
  height: 200px;
}

See it working here on jsfiddle

看到它在jsfiddle上工作

#3

Remove the div.

删除div。

<a href="#" class="bigAnchor">Click to View</a>

then...

a.bigAnchor { display: block; height: 200px; }

#4

You can try something like this:

你可以尝试这样的事情:

.link {
 width: 300px; 
 height: 200px; 
 background: #fc0; 
}
.link a {
 display: block; /* link as block element */
 text-align: center; 
 height: 100%; /* height for all div */
 color: #666; /* link color */
}

<div class="link">
   <a href="1.html">Link</a>
  </div>

#5

CHANGE THE ORDER

更改订单

<a href="#">
<div style="height: 200px">
    Click to View
</div> 
</a>

Note: <div> inside <a> is legal is HTML5

注意:中的

是合法的HTML5

#6

try to change the anchor css:

尝试更改锚点css:

a.block{display:block;height:200px;}

<div style="height: 200px">
    <a class="block" href="#">Click to View</a>
</div>

#7

a { 
 display: inline-block; 
 width: 100%;
 height: 100%;
}

#1