Question

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

＆＃13;

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;
}

＆＃13;

<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;

Answer 1

为display添加<a>属性block或inline-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>

Answer 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>

Answer 3

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

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

Answer 4

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.
}

Answer 5

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

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;
}

表格单元格全尺寸点击

5 个答案: