求助：如何实现#gameInpBox内元素的参考图所示布局？

需求说明 #

需要将#gameInpBox内的表单元素实现规整对齐，解决当前排版混乱的问题。

修改后的代码 #

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Signika+Negative:wght@300&display=swap" rel="stylesheet">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overwatch Tracker</title>
</head>
<body>
    <div class="dim" id="dim">
        <div id="gameInpBox">
            <button id="close">✖</button>
            <div id="inps">
                <form class="form">
                    <div class="form-row">
                        <label for="dmg">Damage delt:</label>
                        <input type="text" id="dmgSEL" name="dmg">
                    </div>
                    <div class="form-row">
                        <label for="heal">Healing done:</label>
                        <input type="text" id="healSEL" name="heal">
                    </div>
                    <div class="form-row">
                        <label for="resault">Resault:</label>
                        <select name="resault" id="resaultSEL">
                            <option value="Win">Win</option>
                            <option value="Draw">Draw</option>
                            <option value="Loss">Loss</option>                        
                        </select>
                    </div>
                    <div class="form-row">
                        <label for="role">Role:</label>
                        <select name="role" id="roleSEL">
                            <option value="DPS">DPS</option>
                            <option value="Support">Support</option>
                            <option value="Tank">Tank</option>                        
                        </select>
                    </div>
                    <div class="form-row">
                        <label for="map">Map:</label>
                        <select name="map" id="mapSEL">
                            <option value="Illios">Illios</option>
                            <option value="Kings-row">Kings row</option>
                            <option value="NQS">NQS</option>                        
                        </select>
                    </div>
                </form>
                <div class="button-group">
                    <button id="cancel">Cancel</button>
                    <button id="Add">Add</button>
                </div>
            </div>
        </div>
    </div>
    <script src="scripts.js"></script>
</body>
</html>

CSS 代码 #

body{
  margin: 0px;
  font-family: 'Signika Negative', sans-serif;
  background-color: #252525;
  color: #f8f9fa;
}

.dim {
  background: rgba(0,0,0, 0.6);
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 30;
  display: block;
}

#gameInpBox{
  z-index: 31;
  height: 40vh;
  width: 50vw;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #adb5bd;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  transform: translate(-50%, -50%);
  border-radius: 15px;
  padding: 2rem;
  box-sizing: border-box;
}

#inps {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

label{
  font-weight: 500;
  color: #252525;
}

input, select{
  padding: 0.5rem;
  border: none;
  border-radius: 4px;
  font-family: inherit;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

#Add, #cancel{
  backface-visibility: hidden;
  font-family: 'Signika Negative', sans-serif;
  border: 0;
  border-radius: .375rem;
  box-sizing: border-box;
  color: black;
  font-weight: 600;
  cursor: pointer;
  font-size: 2vh;
  letter-spacing: -.01em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transform: translateZ(0) scale(1);
  transition: transform .2s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 10vw;
  height: 5vh;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#Add:hover, #cancel:hover {
  transform: scale(1.05);
}

#close{
  background: none;
  border: none;
  font-size: 25px;
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
  color: #252525;
  padding: 0;
}

关键修改说明 #

• 给#gameInpBox添加内边距和盒模型设置，避免内容贴容器边缘
• 用#inps的flex布局将表单和按钮组上下分离，让按钮组固定在底部
• 表单采用网格布局分成两列，实现label与输入控件的自动对齐
• 每个表单项用单独容器包裹，设置为垂直flex布局，增加元素间距
• 按钮改用flex容器布局，替代绝对定位，适配不同屏幕尺寸
• 优化输入框和按钮的交互样式，添加hover缩放效果
• 调整关闭按钮位置，避免与其他元素重叠

内容的提问来源于stack exchange，提问作者Mfa