Question

我目前正在创建一个“数字键盘”，用于将电话号码输入文本字段。我希望我的按钮是方形的，我希望它们动态调整大小以适应窗口。问题是如果我将它们设置为视图高度的百分比，然后使宽度变小，它们不会重新调整大小以适应宽度，如果我将它们设置为视图宽度的百分比，并缩小高度，他们不会重新调整大小以适应高度。我怎样才能达到这个效果（例如，我希望按钮为20vh，20vh或20vw，20vw，以较小者为准）。如果可能的话，我想避免使用javascript。这是我目前的代码：

HTML：

<table>
            <tr class="numberPadRow">
                <td></td>
                <td><button type="button" class="btn btn-primary numberPadButton" value="0" onclick="appendValue(this);"> 0 </button></td>
                <td><button type="button" class="btn btn-primary numberPadButton" value="0" onclick="appendValue(this);"> 0 </button></td>
                <td><button type="button" class="btn btn-primary numberPadButton" value="0" onclick="appendValue(this);"> 0 </button></td>
                <td></td>
            </tr>
        </table>

CSS：

.numberPadButton {
    width: 20vh;
    height: 20vh;
}

此外，我一直试图将屏幕上的三个按钮居中，如果有人可以提供帮助，那就太棒了：）

提前致谢

Answer 1

没有javascript的解决方案是使用max-width和max-height。

.square {
    width: 20vh;
    height: 20vh;
    max-height: 20vw;
    max-width: 20vw;
    background-color: #f00;
}

http://jsfiddle.net/Lmsn057h/

调整方形按钮的大小

1 个答案: