如何在我的頁面中間對我的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>

uj5u.com熱心網友回復：

向右浮動輸入。以下是一種可能的解決方案。有關更改，請參閱 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>

uj5u.com熱心網友回復：

你沒有把你的代碼放在你想在哪個元素中設定“flexbox”。CSS Flexbox有很多你在使用時必須考慮的選項。在下面的代碼中，我為一個帶有.input2添加到 HTML 的類的 div 設定了它：

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

  .input2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    min-height: 400px;
  }
  
  #knopf {
    align-items: center;
    margin: auto;
    padding: 10px;
  }
  
  @media (max-width: 600px) {
    #Mathemann {
      font-size: 12px;
    }
  }

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="style.css">
</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>
          <!-- I added this div and styled it in css -->
        <div class="input2">
          <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>
      </div>
      <script src="javscript.js"></script>
</body>
</html>

Maybe that is not the design that you want but you can use that in each element you want to reach your desired design. I think the reason of your problem: --my background for the div container, which lies above, was ignored-- is that you must set flex-wrap: wrap; and also a min-height to your desired element(tag).

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/352816.html

標籤：javascript html css

上一篇：JavascriptReact排序復雜陣列

下一篇：如何將當前滾動到的專案存盤在URL中？