【发布时间】：2014-08-21 16:42:37
【问题描述】：
我的 html 页面有问题。我创建了 CSS 按钮并将它们放置在 div（行）中，其行为应该像表格一样。我希望每个按钮的大小是 div“单元格”的高度和宽度的 60%。但是，它们总是将空间填充到最大大小。
这是我的fiddle。
这是我的 CSS 代码：
html,body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: blue;
text-align: center;
}
.container
{
display: table;
width: 80%;
height: 70%;
position: relative;
background: white;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
display: inline-block;
overflow: hidden;
}
.row
{
width: 99%;
height: 33%;
//display: table;
display: table-row;
table-layout: fixed;
position: relative;
float: left;
}
.row span
{
width: 100%;
height: 100%;
display: table;
}
.row span a
{
display: table-cell;
width: 33%;
vertical-align: middle;
}
.button
{
width: 60%;
height: 60%;
-moz-box-shadow: inset 0px 1px 0px 0px orange;
-webkit-box-shadow: inset 0px 1px 0px 0px orange;
box-shadow: inset 0px 1px 0px 0px orange;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='orange', endColorstr='orange',GradientType=0);
background-color: orange;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
cursor: pointer;
color: black;
font-size: 100%;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 1px 0px orange;
}
.button:hover
{
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#dfbf91', endColorstr='#dfd691',GradientType=0);
background-color: yellow;
}
.button:active
{
position: relative;
top: 1px;
}
我在寻找问题的解决方案时遇到了困难，因此我们将不胜感激！
【问题讨论】：
-
您对预期行为的解释不清楚。你能详细说明一下吗？
-
div 组成了一个 3 行 3 个单元格的表格，对吧？在这些“单元格”中，我只有链接按钮。我希望每个按钮具有相应单元格高度和宽度的 60%。否则，链接周围没有空白区域。既不在顶部/底部，也不在左侧/右侧。这就是为什么我认为取值 60% 会调整每个按钮的大小。我希望现在更清楚了:)