如何將元素寬度與嵌套元素匹配？

Question

我正在做一個Calculator ，它由一個帶有網格布局的表單標簽和兩個文本區域和多個按鈕組成。

為了使其更具視覺吸引力，我添加了背景顏色，當我調整窗口大小時，背景似乎沒有“覆蓋”所有按鈕。 計算器調整大小

經過一些研究，我發現表單元素寬度小於設備寬度，但網格布局中包含的按鈕確實覆蓋了所有設備寬度。 計算器、表格大小和網格

¿我怎樣才能使按鈕“留在”表單中，以便背景覆蓋所有內容？ （這是一個分配，我確實需要使用一個表單來包含按鈕、網格布局並做出響應）

 form { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 2%; color: #444; max-width: 600px; padding:20px; background-color: #909497; border-radius: 25px; } input[type=button] { background-color: #444; color: #fff; font-size: 200%; } form > textarea { color: green; text-align: center; font-size: 200%; grid-column-start: 1; grid-column-end: 5; text-align: right; } h1 { text-align: left; }

 <!DOCTYPE html> <html lang ="es"> <head> <META CHARSET="UTF-8"/> <link rel="stylesheet" href="CalculadoraRPN.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calculadora Basica</title> <script src="CalculadoraRPN.js"></script> </head> <body> <h1> CalculadoraRPN </h1> <form> <textarea id="pila" disabled="" rows = 6></textarea> <textarea id="pantalla" disabled=""></textarea> <!-- <input type="textarea" id="pantalla" disabled=""/> --> <input type="button" id="mrc" value="MRC" onclick="calculadora.botonMemRecallClear()"/> <input type="button" id="m+" value="M+" onclick="calculadora.botonMemSum()"/> <input type="button" id="m-" value="M-" onclick="calculadora.botonMemSub()"/> <input type="button" id="div" value="/" onclick="calculadora.botonDivision()"/> <input type="button" id="numeric" value="7" onclick="calculadora.botonNumerico(7)"/> <input type="button" id="numeric" value="8" onclick="calculadora.botonNumerico(8)"/> <input type="button" id="numeric" value="9" onclick="calculadora.botonNumerico(9)"/> <input type="button" id="mul" value="*" onclick="calculadora.botonMultiplicacion()"/> <input type="button" id="numeric" value="4" onclick="calculadora.botonNumerico(4)"/> <input type="button" id="numeric" value="5" onclick="calculadora.botonNumerico(5)"/> <input type="button" id="numeric" value="6" onclick="calculadora.botonNumerico(6)"/> <input type="button" id="sub" value="-" onclick="calculadora.botonResta()"/> <input type="button" id="numeric" value="1" onclick="calculadora.botonNumerico(1)"/> <input type="button" id="numeric" value="2" onclick="calculadora.botonNumerico(2)"/> <input type="button" id="numeric" value="3" onclick="calculadora.botonNumerico(3)"/> <input type="button" id="sum" value="+" onclick="calculadora.botonSuma()"/> <input type="button" id="numeric" value="0" onclick="calculadora.botonNumerico(0)"/> <input type="button" id="dec" value="." onclick="calculadora.botonNumerico('.')"/> <input type="button" id="c" value="C" onclick="calculadora.botonClear()"/> <input type="button" id="potencia2" value="x^2" onclick="calculadora.botonPotenciaDeDos()"/> <input type="button" id="potenciax" value="x^y" onclick="calculadora.botonPotenciaDeX()"/> <input type="button" id="sqrt" value="√▭" onclick="calculadora.botonRaizCuadrada()"/> <input type="button" id="sqrt" value="logx(y)" onclick="calculadora.botonLogaritmo()"/> <input type ="button" id="enter" value="Enter" onclick="calculadora.botonEnter()"/> </form> </body> </html>

Answer 1

您好，歡迎來到 Stack Overflow！

主要問題：

在您的計算器中調整大小.png 正在發生，因為您沒有為表單元素設置min-width: 。 這樣做可以在調整屏幕大小時不犧牲元素的結構。 添加以下 CSS。

form {
   min-width: fit-content;
}

次要問題：所以在這一點上，當你調整你的屏幕尺寸時，你不會有任何奇怪或空的盒子/元素。 但是<form>元素本身不適合（完美）移動設備。 這可以通過為包含計算器的元素設置媒體查詢並以特定像素大小調整其大小來實現。 那個 CSS 看起來像這樣。

@media only screen and (max-width: 800px) {
       form {
         width: width of element at 800px;
         height: height of element at 800px;
       }
}

如何將元素寬度與嵌套元素匹配？

問題描述

1 個解決方案

解決方案1
0 2021-11-11 18:39:11

如何將元素寬度與嵌套元素匹配？

問題描述

1 個解決方案

解決方案1 0 2021-11-11 18:39:11

解決方案1
0 2021-11-11 18:39:11