两个输入并排 CSS

Question

I'm currently practicing some WebDev and I'm working on an interactive food pyramid. I've been able to align the other inputs but the inputs on top of the triangle are giving me trouble, I've tried everything from floats to flex and inline blocks. Nothing seems to work, any help would be greatly appreciated.

 function incrementValue1() { let value = parseInt(document.getElementById('number1').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number1').value = value; } function decrementValue1() { let value = parseInt(document.getElementById('number1').value, 10); value = isNaN(value) ? 0 : value; if (value > 0) { value--; } document.getElementById('number1').value = value; } function incrementValue2() { let value = parseInt(document.getElementById('number2').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number2').value = value; } function decrementValue2() { let value = parseInt(document.getElementById('number2').value, 10); value = isNaN(value) ? 0 : value; if (value > 0) { value--; } document.getElementById('number2').value = value; } function incrementValue3() { let value = parseInt(document.getElementById('number3').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number3').value = value; } function decrementValue3() { let value = parseInt(document.getElementById('number3').value, 10); value = isNaN(value) ? 0 : value; if (value > 0) { value--; } document.getElementById('number3').value = value; } function incrementValue4() { let value = parseInt(document.getElementById('number4').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number4').value = value; } function decrementValue4() { let value = parseInt(document.getElementById('number4').value, 10); value = isNaN(value) ? 0 : value; if (value > 0) { value--; } document.getElementById('number4').value = value; } function incrementValue5() { let value = parseInt(document.getElementById('number5').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number5').value = value; } function decrementValue5() { let value = parseInt(document.getElementById('number5').value, 10); value = isNaN(value) ? 0 : value; if (value > 0) { value--; } document.getElementById('number5').value = value; } function incrementValue6() { let value = parseInt(document.getElementById('number6').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number6').value = value; } function decrementValue6() { let value = parseInt(document.getElementById('number6').value, 10); value = isNaN(value) ? 0 : value; if (value > 0) { value--; } document.getElementById('number6').value = value; } var colors = ["red", "blue", "green", "yellow", "purple", "gold", "pink", "grey", "turquoise", "aqua"]; var i = 0; var selectedColor; function changeColour() { selectedColor = colors[i]; document.getElementById("number" + 1).style.backgroundColor = selectedColor; i++; if (i > colors.length) i = 0; } function printDate() { let value = document.getElementById("date").value; document.getElementById("check").innerHTML = "Date: " + value; }

 .container { text-align: center; position: relative; top: 40%; } .inside-text1 { display: none; position: absolute; top: 20px; left: 248px; text-align: center; bottom: -65px; } .inside-text { display: none; position: relative; text-align: center; bottom: -25px; } .inside-text6 { display: none; position: relative; text-align: center; bottom: -120px; /*float: left;*/ } #p6 { border-bottom: 200px solid blue; border-left: 100px solid transparent; border-right: 100px solid transparent; height: 0; width: 0; margin-right: auto; margin-left: auto; } #p5-5 { border-bottom: 20px solid white; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 10px; margin-right: auto; margin-left: auto; } #p5 { border-bottom: 80px solid black; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 220px; margin-right: auto; margin-left: auto; } #p4-5 { border-bottom: 20px solid white; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 240px; margin-right: auto; margin-left: auto; } #p4 { border-bottom: 80px solid purple; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 330px; margin-right: auto; margin-left: auto; } #p3 { border-bottom: 80px solid green; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 420px; margin-right: auto; margin-left: auto; } #p2 { border-bottom: 80px solid yellow; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 510px; margin-right: auto; margin-left: auto; } #p1 { position: relative; top: 40%; border-bottom: 80px solid red; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 600px; margin-right: auto; margin-left: auto; } #p1:hover .inside-text1 { display: block; } #p2:hover .inside-text { display: block; } #p3:hover .inside-text { display: block; } #p4:hover .inside-text { display: block; } #p5:hover .inside-text { display: block; } #p6:hover .inside-text6 { display: block; } .button { margin-right: auto; margin-left: auto; position: relative; } #b1 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #number1 { display: inline-block; height: 25px; width: 25px; border-radius: 50%; border: solid red; background-color: grey; text-align: center; } #b2 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #b3 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #number2 { display: inline-block; height: 25px; width: 25px; border-radius: 50%; border: solid red; text-align: center; } #b4 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #b5 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #number3 { display: inline-block; height: 25px; width: 25px; border-radius: 50%; border: solid red; text-align: center; } #b6 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #b7 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #number4 { display: inline-block; height: 25px; width: 25px; border-radius: 50%; border: solid red; text-align: center; } #b8 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #b9 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #number5 { display: inline-block; height: 25px; width: 25px; border-radius: 50%; border: solid red; text-align: center; } #b10 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #b11 { /*display: inline-flex;*/ float: left; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #number6 { /*display: inline-flex;*/ float: left; height: 25px; width: 25px; border-radius: 50%; border: solid red; text-align: center; } #b12 { /*display: inline-flex;*/ float: left; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #check { display: block; position: center; height: 25px; width: 125px; /*border-radius: 50%;*/ border: solid red; text-align: center; }

 <div class="container"> <div id="p6"> <div class="inside-text6"> <input type="button" onclick="decrementValue6()" value="-" id="b11" /> <label for="number6"></label><input type="text" id="number6" value="0" /> <input type="button" onclick="incrementValue6()" value="+" id="b12" /> </div> </div> <div id="p5-5"></div> <div id="p5"> <div class="inside-text"> <form> <input type="button" onclick="decrementValue5()" value="-" id="b9" /> <label for="number5"></label><input type="text" id="number5" value="1" /> <input type="button" onclick="incrementValue5()" value="+" id="b10" /> </form> </div> </div> <div id="p4-5"></div> <div id="p4"> <div class="inside-text"> <form> <input type="button" onclick="decrementValue4()" value="-" id="b7" /> <label for="number4"></label><input type="text" id="number4" value="2" /> <input type="button" onclick="incrementValue4();" value="+" id="b8" /> </form> </div> </div> <div id="p3"> <div class="inside-text"> <form> <input type="button" onclick="decrementValue3()" value="-" id="b5" /> <label for="number3"></label><input type="text" id="number3" value="3" /> <input type="button" onclick="incrementValue3()" value="+" id="b6" /> </form> </div> </div> <div id="p2"> <div class="inside-text"> <form> <input type="button" onclick="decrementValue2()" value="-" id="b3" /> <label for="number2"></label><input type="text" id="number2" value="4" /> <input type="button" onclick="incrementValue2()" value="+" id="b4" /> </form> </div> </div> <div id="p1"> <div class="inside-text1"> <form> <input type="button" onclick="decrementValue1('number6');changeColour()" value="-" id="b2" /> <input type="text" id="number1" value="6" /> <input type="button" onclick="incrementValue1();changeColour()" value="+" id="b1" /> </form> </div> </div> </div> <label for="date">Enter Date of Submission:</label> <input type="date" id="date" value="0" /> <input type="button" onclick="printDate()" value="Record" /> <div id="check"></div>

Answer 1

You can use flex + justify-content to center content and avoid it to wrap on a few lines :

#p6:hover .inside-text6 {
    display:flex;
  justify-content:center;/* it will center content which might overflow on both sides too */
}

Demo of you code updated to run below :

 function incrementValue1() { let value = parseInt(document.getElementById('number1').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number1').value = value; } function decrementValue1() { let value = parseInt(document.getElementById('number1').value, 10); value = isNaN(value) ? 0 : value; if (value > 0) { value--; } document.getElementById('number1').value = value; } function incrementValue2() { let value = parseInt(document.getElementById('number2').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number2').value = value; } function decrementValue2() { let value = parseInt(document.getElementById('number2').value, 10); value = isNaN(value) ? 0 : value; if (value > 0) { value--; } document.getElementById('number2').value = value; } function incrementValue3() { let value = parseInt(document.getElementById('number3').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number3').value = value; } function decrementValue3() { let value = parseInt(document.getElementById('number3').value, 10); value = isNaN(value) ? 0 : value; if (value > 0) { value--; } document.getElementById('number3').value = value; } function incrementValue4() { let value = parseInt(document.getElementById('number4').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number4').value = value; } function decrementValue4() { let value = parseInt(document.getElementById('number4').value, 10); value = isNaN(value) ? 0 : value; if (value > 0) { value--; } document.getElementById('number4').value = value; } function incrementValue5() { let value = parseInt(document.getElementById('number5').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number5').value = value; } function decrementValue5() { let value = parseInt(document.getElementById('number5').value, 10); value = isNaN(value) ? 0 : value; if (value > 0) { value--; } document.getElementById('number5').value = value; } function incrementValue6() { let value = parseInt(document.getElementById('number6').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number6').value = value; } function decrementValue6() { let value = parseInt(document.getElementById('number6').value, 10); value = isNaN(value) ? 0 : value; if (value > 0) { value--; } document.getElementById('number6').value = value; } var colors = ["red", "blue", "green", "yellow", "purple", "gold", "pink", "grey", "turquoise", "aqua"]; var i = 0; var selectedColor; function changeColour() { selectedColor = colors[i]; document.getElementById("number" + 1).style.backgroundColor = selectedColor; i++; if (i > colors.length) i = 0; } function printDate() { let value = document.getElementById("date").value; document.getElementById("check").innerHTML = "Date: " + value; }

 .container { text-align: center; position: relative; top: 40%; } .inside-text1 { display: none; position: absolute; top: 20px; left: 248px; text-align: center; bottom: -65px; } .inside-text { display: none; position: relative; text-align: center; bottom: -25px; } .inside-text6 { display: none; position: relative; text-align: center; bottom: -120px } #p6 { border-bottom: 200px solid blue; border-left: 100px solid transparent; border-right: 100px solid transparent; height: 0; width: 0; margin-right: auto; margin-left: auto; } #p5-5 { border-bottom: 20px solid white; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 10px; margin-right: auto; margin-left: auto; } #p5 { border-bottom: 80px solid black; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 220px; margin-right: auto; margin-left: auto; } #p4-5 { border-bottom: 20px solid white; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 240px; margin-right: auto; margin-left: auto; } #p4 { border-bottom: 80px solid purple; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 330px; margin-right: auto; margin-left: auto; } #p3 { border-bottom: 80px solid green; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 420px; margin-right: auto; margin-left: auto; } #p2 { border-bottom: 80px solid yellow; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 510px; margin-right: auto; margin-left: auto; } #p1 { position: relative; top: 40%; border-bottom: 80px solid red; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 600px; margin-right: auto; margin-left: auto; } #p1:hover .inside-text1 { display: block; } #p2:hover .inside-text { display: block; } #p3:hover .inside-text { display: block; } #p4:hover .inside-text { display: block; } #p5:hover .inside-text { display: block; } #p6:hover .inside-text6 { display:flex; justify-content:center; } .button { margin-right: auto; margin-left: auto; position: relative; } #b1 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #number1 { display: inline-block; height: 25px; width: 25px; border-radius: 50%; border: solid red; background-color: grey; text-align: center; } #b2 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #b3 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #number2 { display: inline-block; height: 25px; width: 25px; border-radius: 50%; border: solid red; text-align: center; } #b4 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #b5 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #number3 { display: inline-block; height: 25px; width: 25px; border-radius: 50%; border: solid red; text-align: center; } #b6 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #b7 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #number4 { display: inline-block; height: 25px; width: 25px; border-radius: 50%; border: solid red; text-align: center; } #b8 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #b9 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #number5 { display: inline-block; height: 25px; width: 25px; border-radius: 50%; border: solid red; text-align: center; } #b10 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #b11 { /*display: inline-flex;*/ float: left; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #number6 { /*display: inline-flex;*/ float: left; height: 25px; width: 25px; border-radius: 50%; border: solid red; text-align: center; } #b12 { /*display: inline-flex;*/ float: left; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #check { display: block; position: center; height: 25px; width: 125px; /*border-radius: 50%;*/ border: solid red; text-align: center; }

 <div class="container"> <div id="p6"> <div class="inside-text6"> <input type="button" onclick="decrementValue6()" value="-" id="b11" /> <label for="number6"></label><input type="text" id="number6" value="0" /> <input type="button" onclick="incrementValue6()" value="+" id="b12" /> </div> </div> <div id="p5-5"></div> <div id="p5"> <div class="inside-text"> <form> <input type="button" onclick="decrementValue5()" value="-" id="b9" /> <label for="number5"></label><input type="text" id="number5" value="1" /> <input type="button" onclick="incrementValue5()" value="+" id="b10" /> </form> </div> </div> <div id="p4-5"></div> <div id="p4"> <div class="inside-text"> <form> <input type="button" onclick="decrementValue4()" value="-" id="b7" /> <label for="number4"></label><input type="text" id="number4" value="2" /> <input type="button" onclick="incrementValue4();" value="+" id="b8" /> </form> </div> </div> <div id="p3"> <div class="inside-text"> <form> <input type="button" onclick="decrementValue3()" value="-" id="b5" /> <label for="number3"></label><input type="text" id="number3" value="3" /> <input type="button" onclick="incrementValue3()" value="+" id="b6" /> </form> </div> </div> <div id="p2"> <div class="inside-text"> <form> <input type="button" onclick="decrementValue2()" value="-" id="b3" /> <label for="number2"></label><input type="text" id="number2" value="4" /> <input type="button" onclick="incrementValue2()" value="+" id="b4" /> </form> </div> </div> <div id="p1"> <div class="inside-text1"> <form> <input type="button" onclick="decrementValue1('number6');changeColour()" value="-" id="b2" /> <input type="text" id="number1" value="6" /> <input type="button" onclick="incrementValue1();changeColour()" value="+" id="b1" /> </form> </div> </div> </div> <label for="date">Enter Date of Submission:</label> <input type="date" id="date" value="0" /> <input type="button" onclick="printDate()" value="Record" /> <div id="check"></div>

Answer 2

Change your CSS here:

#p6:hover .inside-text6{
    display: block;
} 

The :hover rule overruled your display: flex approaches.

---

PS: I've put this into a fiddle , this helps people with getting at your problem easier - welcome to SO! :)

Answer 3

Try changing the following css and change the translate to make it center. https://jsfiddle.net/Luodqwhc/

 #p6:hover .inside-text6 { display: flex; align-items: center; transform: translate(-42px, -25px); }

Answer 4

I would go with flex and center.

.inside-text6 {
  display: none;
  position: relative;
  text-align: center;
  bottom: -120px;
  align-items: center;
  justify-content: center;
}

and change to display: flex on hover

#p6:hover .inside-text6 {
  display: flex;
}

You should also improve your code with only one increment/decrement function with element id as a parameter. Something like that

function incrementValue(el)
{
    let value = parseInt(document.getElementById(el).value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById(el).value = value;
}

function decrementValue(el)
{
    let value = parseInt(document.getElementById(el).value, 10);
    value = isNaN(value) ? 0 : value;
    if(value>0)
    {
        value--;
    }
    document.getElementById(el).value = value;
}

And you would call it as

<input type="button" onclick="decrementValue('number1')" value="-" id="b1" />
<input type="button" onclick="decrementValue('number2')" value="-" id="b2" />
<input type="button" onclick="decrementValue('number3')" value="-" id="b3" />
...

 function incrementValue1() { let value = parseInt(document.getElementById('number1').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number1').value = value; } function decrementValue1() { let value = parseInt(document.getElementById('number1').value, 10); value = isNaN(value) ? 0 : value; if (value > 0) { value--; } document.getElementById('number1').value = value; } function incrementValue2() { let value = parseInt(document.getElementById('number2').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number2').value = value; } function decrementValue2() { let value = parseInt(document.getElementById('number2').value, 10); value = isNaN(value) ? 0 : value; if (value > 0) { value--; } document.getElementById('number2').value = value; } function incrementValue3() { let value = parseInt(document.getElementById('number3').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number3').value = value; } function decrementValue3() { let value = parseInt(document.getElementById('number3').value, 10); value = isNaN(value) ? 0 : value; if (value > 0) { value--; } document.getElementById('number3').value = value; } function incrementValue4() { let value = parseInt(document.getElementById('number4').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number4').value = value; } function decrementValue4() { let value = parseInt(document.getElementById('number4').value, 10); value = isNaN(value) ? 0 : value; if (value > 0) { value--; } document.getElementById('number4').value = value; } function incrementValue5() { let value = parseInt(document.getElementById('number5').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number5').value = value; } function decrementValue5() { let value = parseInt(document.getElementById('number5').value, 10); value = isNaN(value) ? 0 : value; if (value > 0) { value--; } document.getElementById('number5').value = value; } function incrementValue6() { let value = parseInt(document.getElementById('number6').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number6').value = value; } function decrementValue6() { let value = parseInt(document.getElementById('number6').value, 10); value = isNaN(value) ? 0 : value; if (value > 0) { value--; } document.getElementById('number6').value = value; } var colors = ["red", "blue", "green", "yellow", "purple", "gold", "pink", "grey", "turquoise", "aqua"]; var i = 0; var selectedColor; function changeColour() { selectedColor = colors[i]; document.getElementById("number" + 1).style.backgroundColor = selectedColor; i++; if (i > colors.length) i = 0; } function printDate() { let value = document.getElementById("date").value; document.getElementById("check").innerHTML = "Date: " + value; }

 .container { text-align: center; position: relative; top: 40%; } .inside-text1 { display: none; position: absolute; top: 20px; left: 248px; text-align: center; bottom: -65px; } .inside-text { display: none; position: relative; text-align: center; bottom: -25px; } .inside-text6 { display: none; position: relative; text-align: center; bottom: -120px; align-items: center; justify-content: center; /*float: left;*/ } #p6 { border-bottom: 200px solid blue; border-left: 100px solid transparent; border-right: 100px solid transparent; height: 0; width: 0; margin-right: auto; margin-left: auto; } #p5-5 { border-bottom: 20px solid white; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 10px; margin-right: auto; margin-left: auto; } #p5 { border-bottom: 80px solid black; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 220px; margin-right: auto; margin-left: auto; } #p4-5 { border-bottom: 20px solid white; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 240px; margin-right: auto; margin-left: auto; } #p4 { border-bottom: 80px solid purple; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 330px; margin-right: auto; margin-left: auto; } #p3 { border-bottom: 80px solid green; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 420px; margin-right: auto; margin-left: auto; } #p2 { border-bottom: 80px solid yellow; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 510px; margin-right: auto; margin-left: auto; } #p1 { position: relative; top: 40%; border-bottom: 80px solid red; border-left: 45px solid transparent; border-right: 45px solid transparent; height: 0; width: 600px; margin-right: auto; margin-left: auto; } #p1:hover .inside-text1 { display: block; } #p2:hover .inside-text { display: block; } #p3:hover .inside-text { display: block; } #p4:hover .inside-text { display: block; } #p5:hover .inside-text { display: block; } #p6:hover .inside-text6 { display: flex; } .button { margin-right: auto; margin-left: auto; position: relative; } #b1 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #number1 { display: inline-block; height: 25px; width: 25px; border-radius: 50%; border: solid red; background-color: grey; text-align: center; } #b2 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #b3 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #number2 { display: inline-block; height: 25px; width: 25px; border-radius: 50%; border: solid red; text-align: center; } #b4 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #b5 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #number3 { display: inline-block; height: 25px; width: 25px; border-radius: 50%; border: solid red; text-align: center; } #b6 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #b7 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #number4 { display: inline-block; height: 25px; width: 25px; border-radius: 50%; border: solid red; text-align: center; } #b8 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #b9 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #number5 { display: inline-block; height: 25px; width: 25px; border-radius: 50%; border: solid red; text-align: center; } #b10 { display: inline-block; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #b11 { /*display: inline-flex;*/ float: left; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #number6 { /*display: inline-flex;*/ float: left; height: 25px; width: 25px; border-radius: 50%; border: solid red; text-align: center; } #b12 { /*display: inline-flex;*/ float: left; height: 25px; width: 30px; border-radius: 50%; border: solid red; text-align: center; } #check { display: block; position: center; height: 25px; width: 125px; /*border-radius: 50%;*/ border: solid red; text-align: center; }

 <div class="container"> <div id="p6"> <div class="inside-text6"> <input type="button" onclick="decrementValue6()" value="-" id="b11" /> <label for="number6"></label><input type="text" id="number6" value="0" /> <input type="button" onclick="incrementValue6()" value="+" id="b12" /> </div> </div> <div id="p5-5"></div> <div id="p5"> <div class="inside-text"> <form> <input type="button" onclick="decrementValue5()" value="-" id="b9" /> <label for="number5"></label><input type="text" id="number5" value="1" /> <input type="button" onclick="incrementValue5()" value="+" id="b10" /> </form> </div> </div> <div id="p4-5"></div> <div id="p4"> <div class="inside-text"> <form> <input type="button" onclick="decrementValue4()" value="-" id="b7" /> <label for="number4"></label><input type="text" id="number4" value="2" /> <input type="button" onclick="incrementValue4();" value="+" id="b8" /> </form> </div> </div> <div id="p3"> <div class="inside-text"> <form> <input type="button" onclick="decrementValue3()" value="-" id="b5" /> <label for="number3"></label><input type="text" id="number3" value="3" /> <input type="button" onclick="incrementValue3()" value="+" id="b6" /> </form> </div> </div> <div id="p2"> <div class="inside-text"> <form> <input type="button" onclick="decrementValue2()" value="-" id="b3" /> <label for="number2"></label><input type="text" id="number2" value="4" /> <input type="button" onclick="incrementValue2()" value="+" id="b4" /> </form> </div> </div> <div id="p1"> <div class="inside-text1"> <form> <input type="button" onclick="decrementValue1('number6');changeColour()" value="-" id="b2" /> <input type="text" id="number1" value="6" /> <input type="button" onclick="incrementValue1();changeColour()" value="+" id="b1" /> </form> </div> </div> </div> <label for="date">Enter Date of Submission:</label> <input type="date" id="date" value="0" /> <input type="button" onclick="printDate()" value="Record" /> <div id="check"></div>