是的,我知道,此问题已被多次询问,可能的解决方案是在链接中添加style="display:block;"
。
由于某种原因,此解决方案不适用于表格样式DIV:
https://jsfiddle.net/exyv8jmw/1/
HTML:
<div class="table">
<div class="tablerow">
<div class="left">
<a href="/something.html" style="display:block">
This is a link</a>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
CSS:
.table{
width:500px;
display:table;
}
.tablerow{
display:table-row;
}
.left{
width:50%;
background:green;
display:table-cell;
padding:5px;
}
.right{
width:50%;
display:table-cell;
background:red;
padding:5px;
}
如您所见,空绿色空间只能水平点击,但不能垂直点击。我也尝试过:
<a href="/something.html" style="display:block"><div class="left">This is a link</div></a>
但它没有帮助。
答案 0 :(得分:1)
您需要将height: 100%;
添加到链接.left
和.tablerow
元素。
.table{
width:500px;
display:table;
}
.tablerow{
display:table-row;
height: 100%;
}
.left{
width:50%;
background:green;
display:table-cell;
padding:5px;
height: 100%;
}
.right{
width:50%;
display:table-cell;
background:red;
padding:5px;
}
<div class="table">
<div class="tablerow">
<div class="left">
<a href="/something.html" style="display:block;height:100%;">
This is a link</a>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
答案 1 :(得分:0)
你不能把div放在'a'元素里吗?
<a href="/something.html" >
<div class="left">
This is a link </div>
</a>
答案 2 :(得分:0)
直接将'left'
类应用于a
元素,即:
<a href="#" class="left">this is a link</a>
虽然这不允许额外的内容,但它确实使锚填充了可用空间。
问题的一部分是,默认情况下,锚标签是&#34; span&#34;类型标记,只填充与其内容一样大的空间,忽略内部div。
您必须将锚标记行为设为&#34; block&#34;样式元素,而不是其周围元素或内部元素。
答案 3 :(得分:0)
您可以将侦听器添加到div id。
<div class="table" id="clik">
document.getElementById("clik").addEventListener("click", function(){
// document.location = "/something.html";
alert("hello");
});