html - div 内的 CSS 按钮大小

Question

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

我一直在寻找问题的解决方案，因此我们将不胜感激!

Answer 1

这就是你要找的:

只需向 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: 30%;
    //display: table;
    display: table-row;
    table-layout: fixed;
    position: relative;
    float: left;
    margin-top: 5px;
}

.row span
{
    width: 100%;
    height: 100%;
    padding-top:5%;
}

.row span a {
    display: inline-block;
    vertical-align: middle;
    width: 25%;
    margin: 3%;
}

.button
{
    width: 40%;
    height: 40%;
    -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;
}
@media all and (max-width: 480px) 
        {
            .button
{
    width: 40%;
    height: 40%;
    -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: 60%;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0px 1px 0px orange;
    overflow: hidden;
    text-overflow: ellipsis;
}            
        }

.button:hover
{
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#dfbf91', endColorstr='#dfd691',GradientType=0);
    background-color: yellow;
}

.button:active
{
    position: relative;
    top: 1px;
}