表格单元格全尺寸点击

时间:2015-08-14 14:03:14

标签: html css

当您将鼠标悬停在框上时,表格单元格会改变颜色,我还需要使框格完全可点击,而不仅仅是中间的文本而不更改框的高度和宽度。我把我的div包裹在标签中,但无济于事。



div.container {
  display: table;
}
div.column {
  display: table-cell;
  height: 100px;
  width: 100px;
  vertical-align: middle;
  text-align: center;
  background-color: #c2ad80;
}
div.column a {
  color: white;
  font-family: Arial;
  font-size: 12px;
  text-decoration: none;
  height: 100px;
  width: 100px;
}
div.column:hover {
  background-color: #a2884f;
}

<div class="container">
  <div class="column"><a href="https://www.google.co.uk"> Solution Assessment</a>
  </div>
  <div class="column"><a href="https://www.google.co.uk"> Design</a>
  </div>
  <div class="column"><a href="https://www.google.co.uk"> Build</a>
  </div>
  <div class="column"><a href="https://www.google.co.uk"> Deploy</a>
  </div>
  <div class="column"><a href="https://www.google.co.uk"> Test</a>
  </div>
  <div class="column"><a href="https://www.google.co.uk"> Live (BAU)</a>
  </div>

</div>
&#13;
&#13;
&#13;

5 个答案:

答案 0 :(得分:2)

display添加<a>属性blockinline-block,因为内嵌元素没有框模型。

div.container {
  display: table;
}
div.column {
  display: table-cell;
  height: 100px;
  width: 100px;
  vertical-align: middle;
  text-align: center;
  background-color: #c2ad80;
}
div.column a {
  color: white;
  font-family: Arial;
  font-size: 12px;
  text-decoration: none;
  height: 100px;
  width: 100px;
  display: inline-block;
}
div.column:hover {
  background-color: #a2884f;
}
<div class="container">
  <div class="column"><a href="https://www.google.co.uk"> Solution Assessment</a>
  </div>
  <div class="column"><a href="https://www.google.co.uk"> Design</a>
  </div>
  <div class="column"><a href="https://www.google.co.uk"> Build</a>
  </div>
  <div class="column"><a href="https://www.google.co.uk"> Deploy</a>
  </div>
  <div class="column"><a href="https://www.google.co.uk"> Test</a>
  </div>
  <div class="column"><a href="https://www.google.co.uk"> Live (BAU)</a>
  </div>

</div>

答案 1 :(得分:2)

有更简单的解决方案

div.container {
  display: table;
}
div.container a {
  display: table-cell;
  height: 100px;
  width: 100px;
  vertical-align: middle;
  text-align: center;
  background-color: #c2ad80;
  color: white;
  font-family: Arial;
  font-size: 12px;
  text-decoration: none;
}
div.container a:hover {
  background-color: #a2884f;
}
<div class="container">
  <a href="https://www.google.co.uk">Solution Assessment</a>
  <a href="https://www.google.co.uk">Design</a>
  <a href="https://www.google.co.uk">Build</a>
  <a href="https://www.google.co.uk">Deploy</a>
  <a href="https://www.google.co.uk">Test</a>
  <a href="https://www.google.co.uk">Live (BAU)</a>
</div>

答案 2 :(得分:0)

您需要为链接添加display:block - 否则widthheight不会产生任何影响,因为a是内联元素。

(然后您可能还想添加line-height:100px,以使链接的文本内容仍然垂直居中。)

答案 3 :(得分:0)

div.column a {
  color: white;
  font-family: Arial;
  font-size: 12px;
  text-decoration: none;
  height: 100px;
  width: 100px;
  display: block;    //add display:block; since Anchor tags <a> are inline elements.
}

答案 4 :(得分:0)

我已经在办公室里问了另一个人的解决方案。

CSS更改

div.column a {
    color:white;
    font-family: Arial;
    font-size: 12px;
    text-decoration:none;
    display:block;
    height:100px;
    width:100px;
    display: table-cell;
    vertical-align: middle;
}