是的,我知道,这个问题已经被问过很多次了,一个可能的解决方案是在链接中添加 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>
但这并没有帮助。
最佳答案
您需要在链接、.left
和.tablerow
元素中添加height: 100%;
。
.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>
关于css - 如何使整个 div 可点击(表格样式 div),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42399015/