- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
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粉5742689892023-09-16 11:43:08
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 */
}