简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Jadual akan berkembang secara mendatar dan bukannya menegak
P粉087074897
P粉087074897 2023-09-15 17:32:14
0
1
583

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
P粉5742689892023-09-16 11:43:08 Tingkat 1

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 */
}
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！