css 形状将水平而非垂直地增长

nhaq1z21 于 2023-07-01 发布在其他

关注(0)|答案(1)|浏览(84)

我试图使一个计算器，我正在通过HTML和CSS目前的工作。我正试图使计算器在垂直和水平方向上都变大。我可以很容易地增加宽度以适应容器，或者使用width：100%或Flex：1 1 100%;然而，每当我试图增加高度的高度：100%;它离开了容器，输入按钮变得很大。我试过使用flex-basis和flex-grow来使它垂直增长，但我做不到。

<body>
    <div class="container">
            <form>
                <div class="display">
                    <input type="text" name="display">
                </div>
                <div class="column1">
                    <input type="button" value="AC">
                    <input type="button" value="+/-">
                    <input type="button" value="%">
                    <input type="button" value="/">
                </div>
                <div class="column2">
                    <input type="button" value="7">
                    <input type="button" value="8">
                    <input type="button" value="9">
                    <input type="button" value="*">
                </div>
                <div class="column3">
                    <input type="button" value="4">
                    <input type="button" value="5">
                    <input type="button" value="6">
                    <input type="button" value="-">
                </div>
                <div class="column4">
                    <input type="button" value="1">
                    <input type="button" value="2">
                    <input type="button" value="3">
                    <input type="button" value="+">
                </div>
                <div class="column5">
                    <input type="button" value="0">
                    <input type="button" value=".">
                    <input type="button" value="=">
                </div>
            </form>
    </div>
</body>

html {
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height: 100%;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 50%;
    width: 30%;
}

form {
    flex: 0 1 100%;
}

.column1, .column2, .column3, .column4, .column5, .display {
    display: flex;
    height: 100%;
}

.column1 input, .column2 input, .column3 input, .column4 input, .column5 input, .display input {
    flex: 1 1 100%;
}

css

来源：https://stackoverflow.com/questions/76551651/form-will-grow-horizontally-not-vertically

1条答案

按热度按时间

k5ifujac1#

下面是你如何做到这一点：

.container{
    /* height: 50%; */
    width: 100%;
}

.column1, .column2, .column3, .column4, .column5, .display{
    height: calc(100vh/6);
    /* Distributing the viewport height within 6 columns */
}

赞(0）回复(0）举报 2023-07-01

我来回答

css 形状将水平而非垂直地增长

1条答案

相关问题

热门标签

最新问答