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

Question

这是我的第一个问题。我使用 HTML、CSS 和 Javascript.

创建了一个简单的小费计算器

Click here to view screenshot of the simple tip calculator issue

您可以看到输入和结果 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>

这里有codepen看代码...

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

Answer 1

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

边框等有一些设置，它们的宽度会加到占用的宽度上，但如果使用默认的 box-sizing 则它们会超出元素的宽度。

要将它们计入宽度的一部分，请将其放在 CSS

的顶部

* {
box-sizing: border-box;
}

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

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

How to stop <input> and <div> items overflowing out of a CSS grid column?

css

grid