【发布时间】：2022-12-12 08:04:43
【问题描述】：
所以，我想制作一个计算器应用程序，但我遇到了 display: grid 的这个问题。有一个巨大的每个元素之间的间隙。
图片：
我很困惑。我不知道该怎么做。
我尝试从主 div 中删除容器。我尝试使用 gap: 0 和 gap: 1px 但没有任何效果。我从W3Schools 得到了代码。
@font-face {
font-family: "Seven Segment";
src: url("../fonts/7seg/Seven\ Segment.ttf") format("truetype");
}
@import url('https://fonts.googleapis.com/css2?family=Livvic:wght@200&display=swap');
* {
font-family: Livvic, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.keys {
display: grid;
grid-template-columns: auto auto auto;
column-gap: 0.25px;
}
/* Boring CSS Extra Styles AASKLSYHAKLDJHS */
.calc-key {
align-items: center;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: .25rem;
box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.85);
cursor: pointer;
display: inline-flex;
font-size: 16px;
font-weight: 600;
justify-content: center;
line-height: 1.25;
margin: 0;
padding: calc(.875rem - 1px) calc(1.5rem - 1px);
position: relative;
text-decoration: none;
transition: all 250ms;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
width: 100px;
height: 100px;
}
.calc-key:hover,
.calc-key:focus {
border-color: rgba(0, 0, 0, 0.15);
box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
color: rgba(0, 0, 0, 0.65);
}
.calc-key:hover {
transform: translateY(-1px);
}
.calc-key:active {
background-color: #F0F0F1;
border-color: rgba(0, 0, 0, 0.15);
box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
color: rgba(0, 0, 0, 0.65);
transform: translateY(0);
}<title>Calculator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous" defer></script>
<link rel="stylesheet" href="./css/style.css">
<script src="./js/scripts.js" defer></script>
<div id="calc container container-fluid">
<div class="display">0</div>
</div>
<div class="keys">
<div class="calc-key" onclick="update(0)">0</div>
<div class="calc-key" onclick="update(1)">1</div>
<div class="calc-key" onclick="update(2)">2</div>
<div class="calc-key" onclick="update(3)">3</div>
<div class="calc-key" onclick="update(4)">4</div>
<div class="calc-key" onclick="update(5)">5</div>
<div class="calc-key" onclick="update(6)">6</div>
<div class="calc-key" onclick="update(7)">7</div>
<div class="calc-key" onclick="update(8)">8</div>
<div class="calc-key" onclick="update(9)">9</div>
<div class="calc-key">AC</div>
<div class="calc-key" style="background:rgb(255,75,75)">C</div>
</div>【问题讨论】：
-
css 很容易顺风.. tailwindcss.com
-
@M.Ismail 这没有帮助
-
将
max-width:400px;添加到 .keys -
@M.Ismail 说两次并不能使它更有帮助，只是烦人
-
那么您想要的布局是什么？您是否希望单个网格项目的宽度增长到 33.3%？或者您希望它们保持相同的大小和网格父级的宽度以“收缩”其内容？