我正在尝试使用 CSS 网格为学校编写一个计算器。请引用下面我的codepen。为什么我的 #result
div 被隐藏了,而里面没有内容?当我输入任何文本时,它都是可见的。即使其中没有文字,我该怎么做才能使其可见?谢谢
https://codepen.io/Codpenio/pen/NWPKRYy
#background {
display: grid;
grid-template-areas: "result result result result" "delete delete modulo plus" "seven eight nine minus" "four five six multiply" "one two three divide" "zero comma equal equal";
grid-gap: 10px;
}
.btn {
border: 0;
font-size: 3rem;
}
.number {
color: white;
background-color: #555555;
}
.operator {
color: white;
background-color: #355d77;
}
.delete {
color: white;
background-color: #ab002d;
}
.equal {
color: white;
background-color: #1f7a29;
}
#result {
grid-area: result;
background-color: #464646;
color: #ebebeb;
font-family: "Courier New";
text-align: right;
}
#delete {
grid-area: delete;
}
#modulo {
grid-area: modulo;
}
#plus {
grid-area: plus;
}
#minus {
grid-area: minus;
}
#divide {
grid-area: divide;
}
#multiply {
grid-area: multiply;
}
#comma {
grid-area: comma;
background-color: #355d77;
color: white;
}
#equal {
grid-area: equal;
}
#zero {
grid-area: zero;
}
#one {
grid-area: one;
}
#two {
grid-area: two;
}
#three {
grid-area: three;
}
#four {
grid-area: four;
}
#five {
grid-area: five;
}
#six {
grid-area: six;
}
#seven {
grid-area: seven;
}
#eight {
grid-area: eight;
}
#nine {
grid-area: nine;
}
<div class="container" id="background">
<div id="result"></div>
<button id="delete" class="delete btn">Del</button>
<button id="modulo" value="%" class="btn operator opera-bg fall-back">%</button>
<button id="plus" value="+" class="btn operator opera-bg value align">+</button>
<button id="seven" value="7" class="btn number num-bg num first-child">7</button>
<button id="eight" value="8" class="btn number num-bg num">8</button>
<button id="nine" value="9" class="btn number num-bg num">9</button>
<button id="minus" value="-" class="btn operator opera-bg">-</button>
<button value="4" class="btn number num-bg num first-child">4</button>
<button value="5" class="btn number num-bg num">5</button>
<button value="6" class="btn number num-bg num">6</button>
<button value="*" class="btn operator opera-bg">x</button>
<button id="one" value="1" class="btn number num-bg num first-child">1</button>
<button id="two" value="2" class="btn number num-bg num">2</button>
<button id="three" value="3" class="btn number num-bg num">3</button>
<button id="divide" value="/" class="btn operator opera-bg">/</button>
<button id="zero" value="0" class="btn number zero" id="delete">0</button>
<button id="comma" value="." class="btn num-bg comma fall-back">.</button>
<button id="equal" value="=" class="btn equal align">=</button>
</div>
最佳答案
您可以使用最小高度或插入 0 :
#background {
display: grid;
grid-template-areas: "result result result result" "delete delete modulo plus" "seven eight nine minus" "four five six multiply" "one two three divide" "zero comma equal equal";
grid-gap: 10px;
}
.btn {
border: 0;
font-size: 3rem;
}
.number {
color: white;
background-color: #555555;
}
.operator {
color: white;
background-color: #355d77;
}
.delete {
color: white;
background-color: #ab002d;
}
.equal {
color: white;
background-color: #1f7a29;
}
#result {
grid-area: result;
background-color: #464646;
color: #ebebeb;
font-family: "Courier New";
text-align: right;
min-height: 1.6em;
font-size: 3rem;
}
#delete {
grid-area: delete;
}
#modulo {
grid-area: modulo;
}
#plus {
grid-area: plus;
}
#minus {
grid-area: minus;
}
#divide {
grid-area: divide;
}
#multiply {
grid-area: multiply;
}
#comma {
grid-area: comma;
background-color: #355d77;
color: white;
}
#equal {
grid-area: equal;
}
#zero {
grid-area: zero;
}
#one {
grid-area: one;
}
#two {
grid-area: two;
}
#three {
grid-area: three;
}
#four {
grid-area: four;
}
#five {
grid-area: five;
}
#six {
grid-area: six;
}
#seven {
grid-area: seven;
}
#eight {
grid-area: eight;
}
#nine {
grid-area: nine;
}
<div class="container" id="background">
<div id="result"></div>
<button id="delete" class="delete btn">Del</button>
<button id="modulo" value="%" class="btn operator opera-bg fall-back">%</button>
<button id="plus" value="+" class="btn operator opera-bg value align">+</button>
<button id="seven" value="7" class="btn number num-bg num first-child">7</button>
<button id="eight" value="8" class="btn number num-bg num">8</button>
<button id="nine" value="9" class="btn number num-bg num">9</button>
<button id="minus" value="-" class="btn operator opera-bg">-</button>
<button value="4" class="btn number num-bg num first-child">4</button>
<button value="5" class="btn number num-bg num">5</button>
<button value="6" class="btn number num-bg num">6</button>
<button value="*" class="btn operator opera-bg">x</button>
<button id="one" value="1" class="btn number num-bg num first-child">1</button>
<button id="two" value="2" class="btn number num-bg num">2</button>
<button id="three" value="3" class="btn number num-bg num">3</button>
<button id="divide" value="/" class="btn operator opera-bg">/</button>
<button id="zero" value="0" class="btn number zero" id="delete">0</button>
<button id="comma" value="." class="btn num-bg comma fall-back">.</button>
<button id="equal" value="=" class="btn equal align">=</button>
</div>
要插入 0,您可以使用 :empty
伪类:#result:empty:before {content:'0';}
关于html - 为什么我的网格行/网格项在其中没有内容时被隐藏了?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59109724/