如何实现HTML输入框标题同行页面居中，修复flexbox父div背景失效问题

核心修改说明 #

• JS逻辑调整：将输入值读取逻辑移入按钮点击触发的主函数内，避免仅读取页面加载时的初始空值，同时修复最小值函数的拼写错误（原函数名mainimum修正为minimum）
• 布局调整：所有输入行使用flex布局，给说明文本设置固定宽度，实现所有输入框左端统一对齐
• 样式修复：保留原有深色主题的同时，解决flex布局可能触发的父容器高度塌陷问题，父容器保留overflow:hidden属性，避免背景样式失效

完整修改后代码 #

JavaScript代码 #

/*
Zahlen oben:
1 Kommazahl in1                            in1
2 Kommazhal in2                            in2
--------------------------------------------------------------
Maximum der Zahlen                         outmax
Minimum der Zahlen                         outmin
1 Zahl aufgerundet                         out1aufround
2 Zahl abgerundet                          out2abround
1 Zahl ^2 Zahl (                           out1hoch2round
Wurzel aus Zahl 1                          outroot1round
Zufallszahl                                outrandomnumber
Positive Differenzv von Zahl 1 und 2       outposdif1to2
--------------------------------------------------------------
Knopf der alle Berechnungen auslöst        knopf
*/

function maximum(input1, input2) {
  outmax.value = Math.max(input1, input2);
}

function minimum(input1, input2) {
  outmin.value = Math.min(input1, input2);
}

function oneUpRound(input1) {
  out1aufround.value = Math.ceil(input1);
}

function twoDownRound(input2) {
  out2abround.value = Math.floor(input2);
}

function round1Hoch2(input1, input2) {
  out1hoch2round.value = Math.round(Math.pow(input1, input2));
}

function root1Round(input1) {
  outroot1round.value = Math.round(Math.sqrt(input1));
}

function randomnumber() {
  outrandomnumber.value = Math.round(Math.random() * 10000);
}

function posdif1to2(input1, input2) {
  var maxwert = Math.max(input1, input2);
  var minwert = Math.min(input1, input2);
  outposdif1to2.value = maxwert - minwert
}

function knopfigerKnopf() {
  // 每次点击读取最新输入值，转为数值类型避免运算异常
  var input1 = Number(in1.value);
  var input2 = Number(in2.value);
  maximum(input1, input2);
  minimum(input1, input2);
  oneUpRound(input1);
  twoDownRound(input2);
  round1Hoch2(input1, input2);
  root1Round(input1);
  randomnumber();
  posdif1to2(input1, input2);
}

knopf.onclick = knopfigerKnopf

CSS代码 #

body {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  background-color: black;
  color: white;
  margin: 0;
}

#Mathemann {
  background-color: rgb(40, 40, 40);
  margin: 10px;
  color: white;
  border-radius: 10px;
  padding: 5px 20px;
  overflow: hidden;
}
#Mathemann h1 {
  text-align: center;
}

#input .row {
  display: flex;
  align-items: center;
  margin: 12px 0;
  gap: 10px;
}
#input .row label {
  width: 220px;
  text-align: right;
  flex-shrink: 0;
}
#input input {
  flex-grow: 1;
  max-width: 200px;
  padding: 4px 8px;
}
.btn-wrap {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
#knopf {
  padding: 10px 20px;
  cursor: pointer;
}

@media (max-width: 600px) {
  #Mathemann {
    font-size: 12px;
    margin: 5px;
    padding: 5px 10px;
  }
  #input .row label {
    width: 160px;
  }
  #input input {
    max-width: 140px;
  }
}

HTML代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rechnender Rechner</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="Mathemann">
    <h1>Mathematische Funktionen</h1>
    <div id="input">
      <div class="row">
        <label for="in1">Erste Zahl:</label>
        <input id="in1" type="number" step="0.01">
      </div>
      <div class="row">
        <label for="in2">Zweite Zahl:</label>
        <input id="in2" type="number" step="0.01">
      </div>
      <div class="btn-wrap">
        <button id="knopf">Felder berechnen</button>
      </div>
      <div class="row">
        <label for="outmax">Maximum der Zahlen:</label>
        <input id="outmax" type="number" step="0.01" readonly>
      </div>
      <div class="row">
        <label for="outmin">Minimum der Zahlen:</label>
        <input id="outmin" type="number" step="0.01" readonly>
      </div>
      <div class="row">
        <label for="out1aufround">1. Zahl aufgerundet:</label>
        <input id="out1aufround" type="number" step="0.01" readonly>
      </div>
      <div class="row">
        <label for="out2abround">2. Zahl abgerundet:</label>
        <input id="out2abround" type="number" step="0.01" readonly>
      </div>
      <div class="row">
        <label for="out1hoch2round">1. Zahl ^2. Zahl (gerundet):</label>
        <input id="out1hoch2round" type="number" step="0.01" readonly>
      </div>
      <div class="row">
        <label for="outroot1round">Wurzel aus Zahl 1 (gerundet):</label>
        <input id="outroot1round" type="number" step="0.01" readonly>
      </div>
      <div class="row">
        <label for="outrandomnumber">Zufallszhal:</label>
        <input id="outrandomnumber" type="number" step="0.01" readonly>
      </div>
      <div class="row">
        <label for="outposdif1to2">Positive Differenzv von Zahl 1 und 2:</label>
        <input id="outposdif1to2" type="number" step="0.01" readonly>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

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