Jadual akan berkembang secara mendatar dan bukannya menegak
P粉087074897
P粉087074897 2023-09-15 17:32:14
0
1
590

Saya sedang cuba membuat kalkulator dan sedang mengusahakan HTML dan CSS. Saya cuba menjadikan kalkulator lebih besar secara menegak dan mendatar. Saya boleh meningkatkan lebar dengan mudah untuk memuatkan bekas menggunakan lebar: 100% atau flex: 1 1 100% bagaimanapun, setiap kali saya cuba meningkatkan ketinggian dengan ketinggian: 100% ia keluar dari sempadan bekas dan butang input; menjadi besar. Saya telah mencuba menggunakan flex-basis dan flex-grow untuk menjadikannya tumbuh secara menegak juga, tetapi saya tidak boleh.

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

P粉087074897
P粉087074897

membalas semua(1)
P粉574268989

Berikut adalah kaedah operasi khusus:

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

.column1, .column2, .column3, .column4, .column5, .display{
    height: calc(100vh/6);
    /* Distributing the viewport height within 6 columns */
}
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan