如何停止<input>和<div>项目溢出CSS网格列？

Question

这是我的第一个问题。我使用HTML、CSS和Javascript创建了一个简单的提示计算器。

点击此处查看简单提示计算器问题的屏幕截图

您可以看到输入和结果div从CSS网格列溢出，但按钮在列中完全对齐。

如何使这些输入和div位于CSS网格列中？

我查了一下，尝试了很多修复方法，但似乎都不起作用。我觉得我错过了一些非常简单的东西。我真的是HTML、CSS和Javascript的新手！

提前感谢您的帮助！

function calculate() {
var container = document.querySelector(".container-calculator")
var wrapper = container.querySelector(".wrapper")
var billInput = wrapper.querySelectorAll("input") [0]
billInput = Number(billInput.value)
console.log("Bill Amount Is: $" + billInput + " " + typeof(billInput))
var tipInput = wrapper.querySelectorAll("input") [1]
console.log("Tip percentage is: " + tipInput.value + "%")
var tip = tipInput.value / 100
tip = Number(tip)
console.log("Tip calculation is: " + tip)

var totalTipAmount = tip * billInput
console.log("Total Tip Amount Is: $" + totalTipAmount)
var totalAmount = (billInput + totalTipAmount)
console.log("Total Bill Amount Is: $" + totalAmount)
var totalArea = wrapper.querySelector(".total-bill-amount-output")
var span = totalArea.querySelector("span")
span.innerHTML = "$" + totalAmount
}

*,
*::after,
*::before {
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 2;
}
.container-calculator {
margin: 50px auto;
width: 80%;
border: 2px solid black;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12)
;
}
.heading {
margin: 0;
text-align: center;
font-size: 40px;
font-weight: 900;
}
.wrapper {
display: grid;
grid-template-columns: 2fr 3fr;
grid-template-rows: minmax(auto);
grid-gap: 10px;
padding: 20px;
width: 80%;
margin: 20px auto;
align-items: center;
}
.text bill-amount {
grid-column: 1;
grid-row: 1;
}
.text tip-amount {
grid-column: 1;
grid-row: 2;
}
.input bill-amount {
grid-column: 2;
grid-row: 1;
}
.input tip-amount {
grid-column: 2;
grid-row: 2;
}
.input {
width: 100%;
padding: 10px;
border: 2px solid;
font-size: 20px;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
-webkit-appearance: none; 
margin: 0; 
}
.btn {
grid-column: 2;
grid-row: 3;
width: 100%;
background-color: limegreen;
padding: 10px;
color: white;
font-size: 20px;
font-weight: 700;
margin-top: 5px;
width: 100%;
margin: auto 0;
border: none;
box-shadow: 0 8px 6px -6px black;
;
}
.total-bill-amount {
grid-column: 1;
grid-row: 4;
}
.total-bill-amount-output {
grid-column: 2;
grid-row: 4;
width: 100%;
height: 30px;
border: 2px solid;
padding: 8px;
margin: 10px auto;
}
.span {
align-items: center;
}

<div class="container-calculator">
<h1 class="heading">Tip Calculator</h1>
<div class="wrapper">
<p class="text bill-amount">Bill Amount (in dollars)</p>
<input type="number" class="input bill-amount">
<p class="text tip-amount">Tip Amount (as a %)</p>
<input type="number" class="input tip-amount">
<button class="btn" onClick=calculate()>
Calculate Tip and Total Bill
</button>
<div class="total-bill-amount">Total Amount comes to: </div>
<div class="total-bill-amount-output">
<span></span>
</div>
</div>
</div>

这是用来查看代码的代码笔。。。

https://codepen.io/fmc-design/pen/wvWNgpw

Answer 1

问题是：输入元素溢出了网格边界。

边框等有一些设置，它们的宽度将增加所占用的宽度，但如果使用默认的框大小，则它们将额外增加元素的宽度。

要将它们作为宽度的一部分计算在内，请将其放在CSS 的顶部

* {
box-sizing: border-box;
}

(当然，如果有其他代码依赖于默认设置，请将其放在计算器的本地(。