How can I sort / format my HTML input, with their titles in a row, at the middle of my page?-CodePudding

I've tried to put my inputs in a row with flexbox, but my background for the div container, which lies above, was ignored after reloading.

My task was, to build a simple calculator in JS and I want it to look not like complete garbage.

In the end, the inputs should be centered among themselves.

Here is my code so far:

I am German so don't wonder if you do not understand everything.

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

CodePudding user response：

float inputs to right. Following is one possible solution. See comments in CSS for the changes:

<!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>

CodePudding user response：

You did not put your code to see that in which element you want to set "flexbox". CSS Flexbox has a lot of options that you must consider when using that. In the code below I set that for a div with .input2 class that I added to your HTML:

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).