表格单元格全尺寸单击

当您将鼠标悬停在框上时，表格单元格会改变颜色，我还需要使框完全可点击，而不是仅改变中间的文本而不更改框的高度和宽度。我用标签包裹了我的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>

来源

2015-08-14 Davington III

你为什么不使用'

单曲？另外，如果你真的想增加表格，你会错过“display：table-row”的元素。 – Joshua

@Joshua - 也许是因为那不是表格数据，我们在2000年左右停止使用表格进行布局。 – j08691

@Joshua这是一个IE8浏览器，我认为它不支持HTML5 –

回答

您需要添加display:block的链接 - 否则width和height不允许有任何影响，因为a是一个内联元素。

（然后你可能要添加line-height:100px为好，仍具有垂直居中的链接的文本内容。）

来源

2015-08-14 14:05:30 CBroe

添加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>

来源

2015-08-14 14:06:57

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

来源

2015-08-14 14:09:17 user5173426

有更简单的解决

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>

来源

2015-08-14 14:14:33 Cheslab

我拿出解决方案已经要求在办公室的另一个BOD。

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

来源

2015-08-14 14:17:21

我添加了这个显示：table-cell和verticle-align：middle这个修复了这个问题！ –

表格单元格全尺寸单击

回答

相关问题