Два входа рядом друг с другом CSS - PullRequest
Новая
       1

Два входа рядом друг с другом CSS

0 голосов
/ 19 февраля 2020

В настоящее время я практикую WebDev и работаю над интерактивной пищевой пирамидой. Я был в состоянии выровнять другие входы, но входы в верхней части треугольника доставляют мне проблемы, я перепробовал все: от поплавков до гибких и встроенных блоков. Кажется, ничего не работает, любая помощь будет принята с благодарностью. 

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>

Ответы [ 4 ]

1 голос
/ 19 февраля 2020

Вы можете использовать flex + justify-content для центрирования контента и избежать его переноса на несколько строк: 

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

Демонстрация вашего кода обновлена ​​для запуска ниже: 

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>
0 голосов
/ 19 февраля 2020

Я бы go с изгибом и центром. 

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

и при наведении курсора на display: flex 

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

Вы также должны улучшить свой код, используя только одну функцию увеличения / уменьшения с идентификатором элемента в качестве параметра. Нечто подобное 

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

И вы бы назвали это 

<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>
0 голосов
/ 19 февраля 2020

Попробуйте изменить следующее css и измените перевод, чтобы сделать его центром. https://jsfiddle.net/Luodqwhc/ 

#p6:hover .inside-text6 {
    display: flex;
    align-items: center;
    transform: translate(-42px, -25px);
}
0 голосов
/ 19 февраля 2020

Измените CSS здесь: 

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

Правило :hover отменило ваши display: flex подходы.

PS: Я поместил это в fiddle , это помогает людям легче решить вашу проблему - добро пожаловать в ТАК! :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...