当您将鼠标悬停在框上时,表格单元格会改变颜色,我还需要使框格完全可点击,而不仅仅是中间的文本而不更改框的高度和宽度。我把我的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;
答案 0 :(得分:2)
为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>
答案 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
- 否则width
和height
不会产生任何影响,因为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;
}