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

【问题标题】：How can i match the element width with the nested elements?如何将元素宽度与嵌套元素匹配？
【发布时间】：2021-12-24 04:58:42
【问题描述】：

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

为了使其更具视觉吸引力，我添加了背景颜色，当我调整窗口大小时，背景似乎没有“覆盖”所有按钮。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>

【问题讨论】：

标签： html css grid-layout

【解决方案1】：

您好，欢迎来到 Stack Overflow！

主要问题：

在您的 calculator resized 中发生了 .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;
       }
}

【讨论】：