如何使整个div可点击(表样式div)

时间:2017-02-22 18:01:31

标签: css

是的,我知道,此问题已被多次询问,可能的解决方案是在链接中添加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>

但它没有帮助。

4 个答案:

答案 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");
    });