时间戳

首页 > 解决方案 > 如何在页面中间对我的 HTML 输入进行排序/格式化，并将它们的标题排成一行？

javascript - 如何在页面中间对我的 HTML 输入进行排序/格式化，并将它们的标题排成一行？

问题描述

我尝试使用 flexbox 将我的输入放在一行中，但是我在上面的 div 容器的背景在重新加载后被忽略了。

我的任务是，用 JS 构建一个简单的计算器，我希望它看起来不像完全垃圾。

最后，输入应该集中在它们之间。

到目前为止，这是我的代码：

我是德国人，所以不要怀疑您是否不了解所有内容。

/*
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
*/

var input1 = in1.value;
var input2 = in2.value;

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

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

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

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

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

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

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

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

function knopfigerKnopf() {
  maximum();
  mainimum();
  oneUpRound();
  twoDownRound();
  round1Hoch2();
  root1Round();
  randomnumber();
  posdif1to2();
}

knopf.onclick = knopfigerKnopf
body {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  background-color: black;
  color: white;
}

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

#input {
  margin: 10px;
  padding: 15px;
  color: white;
  text-align: left;
}

#knopf {
  align-items: center;
  margin: auto;
  padding: 10px;
}

@media (max-width: 600px) {
  #Mathemann {
    font-size: 12px;
  }
}
<!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>
</head>

<body>
  <div id="Mathemann">
    <h1>Mathematische Funktionen</h1>
    <div id="input">
      <p>Erste Zahl: <input id="in1" type="number" step="0.01"></p>
      <p>Zweite Zahl: <input id="in2" type="number" step="0.01"></p>
      <button id="knopf">Felder berechnen</button>
      <p>Maximum der Zahlen: <input id="outmax" type="number" step="0.01" readonly></p>
      <p>Minimum der Zahlen: <input id="outmin" type="number" step="0.01" readonly></p>
      <p>1. Zahl aufgerundet: <input id="out1aufround" type="number" step="0.01" readonly></p>
      <p>2. Zahl abgerundet: <input id="out2abround" type="number" step="0.01" readonly></p>
      <p>1. Zahl ^2. Zahl (gerundet): <input id="out1hoch2round" type="number" step="0.01" readonly></p>
      <p>Wurzel aus Zahl 1 (gerundet): <input id="outroot1round" type="number" step="0.01" readonly></p>
      <p>Zufallszhal: <input id="outrandomnumber" type="number" step="0.01" readonly></p>
      <p>Positive Differenzv von Zahl 1 und 2: <input id="outposdif1to2" type="number" step="0.01" readonly></p>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

标签： javascripthtmlcss

解决方案

向右浮动输入。以下是一种可能的解决方案。有关更改，请参阅 CSS 中的注释：

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      background-color: black;
      color: white;
    }
    
    #Mathemann {
      background-color: rgb(40, 40, 40);
      margin: 10px;
      color: white;
      text-align: center;
      border-radius: 10px;
      padding: 5px;
      overflow: hidden;
      width: max-content;    /* limit container width */
      margin: 0 auto;        /* center the entire box*/
    }
    
    #input {
      margin: 10px;
      padding: 15px;
      color: white;
      text-align: left;
    }
    
    input {             /* this rule aligns all inputs to right */
      float: right;
      margin-left: 10px;
    }
    
    #knopf {
      align-items: center;
      margin: auto;
      padding: 10px;
    }
    
    @media (max-width: 600px) {
      #Mathemann {
        font-size: 12px;
      }
    }
  </style>
</head>

<body>
  <div id="Mathemann">
    <h1>Mathematische Funktionen</h1>
    <div id="input">
      <p>Erste Zahl: <input id="in1" type="number" step="0.01"></p>
      <p>Zweite Zahl: <input id="in2" type="number" step="0.01"></p>
      <button id="knopf">Felder berechnen</button>
      <p>Maximum der Zahlen: <input id="outmax" type="number" step="0.01" readonly></p>
      <p>Minimum der Zahlen: <input id="outmin" type="number" step="0.01" readonly></p>
      <p>1. Zahl aufgerundet: <input id="out1aufround" type="number" step="0.01" readonly></p>
      <p>2. Zahl abgerundet: <input id="out2abround" type="number" step="0.01" readonly></p>
      <p>1. Zahl ^2. Zahl (gerundet): <input id="out1hoch2round" type="number" step="0.01" readonly></p>
      <p>Wurzel aus Zahl 1 (gerundet): <input id="outroot1round" type="number" step="0.01" readonly></p>
      <p>Zufallszhal: <input id="outrandomnumber" type="number" step="0.01" readonly></p>
      <p>Positive Differenzv von Zahl 1 und 2: <input id="outposdif1to2" type="number" step="0.01" readonly></p>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

推荐阅读