如何将元素宽度与嵌套元素相匹配？

Question

我正在做一个 Calculator，它由一个带有网格布局的表单标签组成，在两个文本区域和多个按钮中。

为了使其更具视觉吸引力，我添加了背景颜色，当我调整 window 大小时，背景似乎没有“覆盖”所有按钮。Calculator resized

经过一些研究，我发现表单元素的宽度小于设备宽度，但网格布局中包含的按钮确实覆盖了所有设备宽度。 Calculator, form size and grid

¿如何让按钮“留在”表单中，以便背景覆盖所有内容？（这是一个任务，我确实需要使用一个表单来包含按钮、一个网格布局和响应）

  

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;
       }
}

如何将元素宽度与嵌套元素相匹配？

How can i match the element width with the nested elements?

html

css

grid-layout