Question

在div列中，前几项不在页面中；如果项目较少，那就没问题，但是用这个数量，而不是向下扩展形式，它会向上扩展。

摘要：

var timesClicked = 0;
document.getElementById('add').addEventListener("click", () => {
  if (document.getElementById('visibleInput').value == "") {
    document.getElementById('error').style.display = "block";
  } else {
    document.getElementById('error').style.display = "none";
    if (timesClicked == 0) {
      document.getElementById('username').value = document.getElementById('visibleInput').value;
      document.getElementById('visibleInput').value = "";
      document.getElementById('visibleInput').placeholder = "Email";
      document.getElementById('visibleInput').type = "Email";
      document.getElementById('circle1').classList.remove("active");
      document.getElementById('circle1').classList.add("filled");
      document.getElementById('circle2').classList.add("active");
      timesClicked++;
    } else if (timesClicked == 1) {
      document.getElementById('password').value = document.getElementById('visibleInput').value;
      document.getElementById('visibleInput').value = "";
      document.getElementById('visibleInput').placeholder = "Password";
      document.getElementById('visibleInput').type = "password";
      document.getElementById('circle2').classList.remove("active");
      document.getElementById('circle2').classList.add("filled");
      document.getElementById('circle3').classList.add("active");
      timesClicked++;
    } else if (timesClicked == 2) {
      document.getElementById('passwordConfirm').value = document.getElementById('visibleInput').value;
      document.getElementById('visibleInput').value = "";
      document.getElementById('visibleInput').placeholder = "Confirma a tua password";
      document.getElementById('circle3').classList.remove("active");
      document.getElementById('circle3').classList.add("filled");
      document.getElementById('circle4').classList.add("active");
      timesClicked++;
    } else if (timesClicked == 3) {
      document.getElementById('phone').value = document.getElementById('visibleInput').value;
      document.getElementById('visibleInput').value = "";
      document.getElementById('visibleInput').placeholder = "Número de telemóvel";
      document.getElementById('visibleInput').type = "text";
      document.getElementById('circle4').classList.remove("active");
      document.getElementById('circle4').classList.add("filled");
      document.getElementById('circle5').classList.add("active");
      timesClicked++;
    } else if (timesClicked == 4) {
      document.getElementById('attr1').value = document.getElementById('input1').value;
      document.getElementById('attr2').value = document.getElementById('input2').value;
      document.getElementById('attr3').value = document.getElementById('input3').value;
      document.getElementById('attr4').value = document.getElementById('input4').value;
      document.getElementById('attr5').value = document.getElementById('input5').value;
      document.getElementById('attr6').value = document.getElementById('input6').value;
      document.getElementById('attr7').value = document.getElementById('input7').value;
      document.getElementById('attr8').value = document.getElementById('input8').value;
      document.getElementById('attr9').value = document.getElementById('input9').value;
      document.getElementById('attr10').value = document.getElementById('input10').value;
      document.getElementById('attr11').value = document.getElementById('input11').value;
      document.getElementById('attr12').value = document.getElementById('input12').value;
      document.getElementById('visibleInput').style.display = "none";
      document.getElementById('attributesDiv').classList.remove("notDisplay");
      document.getElementById('circle5').classList.remove("active");
      document.getElementById('circle5').classList.add("filled");
      document.getElementById('circle6').classList.add("active");
      timesClicked++;
    } else if (timesClicked == 5) {
      document.getElementById('attributesDiv').classList.add("notDisplay");
      document.getElementById('circle6').classList.remove("active");
      document.getElementById('circle6').classList.add("filled");
      document.getElementById('circle7').classList.add("active");
      document.getElementById('add').value = "Registar";
      setTimeout(() => {
        document.getElementById('add').type = "submit"
      }, 10);
      document.getElementById('valuesToSubmit').style.display = "block";
      document.getElementById('valuesToSubmit').innerHTML = "Clique em registar para continuar";
      timesClicked++;
    }
  }

})
document.getElementById('previous').addEventListener("click", () => {
  console.log(timesClicked);
  document.getElementById('error').style.display = "none";
  if (timesClicked == 1) {
    document.getElementById('visibleInput').value = "";
    document.getElementById('visibleInput').placeholder = "Nome de utilizador";
    document.getElementById('circle2').classList.remove("active");
    document.getElementById('circle1').classList.remove("filled");
    document.getElementById('circle1').classList.add("active");
    timesClicked--;
  } else if (timesClicked == 2) {
    document.getElementById('visibleInput').value = "";
    document.getElementById('visibleInput').placeholder = "Email";
    document.getElementById('circle3').classList.remove("active");
    document.getElementById('circle2').classList.remove("filled");
    document.getElementById('circle2').classList.add("active");
    timesClicked--;
  } else if (timesClicked == 3) {
    document.getElementById('visibleInput').value = "";
    document.getElementById('visibleInput').placeholder = "Password";
    document.getElementById('circle4').classList.remove("active");
    document.getElementById('circle3').classList.remove("filled");
    document.getElementById('circle3').classList.add("active");
    timesClicked--;
  } else if (timesClicked == 4) {
    document.getElementById('visibleInput').value = "";
    document.getElementById('visibleInput').placeholder = "Confirma a tua password";
    document.getElementById('circle5').classList.remove("active");
    document.getElementById('circle4').classList.remove("filled");
    document.getElementById('circle4').classList.add("active");
    timesClicked--;
  } else if (timesClicked == 5) {
    document.getElementById('visibleInput').value = "";
    document.getElementById('visibleInput').style.display = "block";
    document.getElementById('visibleInput').placeholder = "Número de telemóvel";
    document.getElementById('circle6').classList.remove("active");
    document.getElementById('circle5').classList.remove("filled");
    document.getElementById('circle5').classList.add("active");
    document.getElementById('attributesDiv').classList.add("notDisplay");
    timesClicked--;
  } else if (timesClicked == 6) {
    document.getElementById('attributesDiv').classList.remove("notDisplay");
    document.getElementById('visibleInput').style.display = "none";
    document.getElementById('circle7').classList.remove("active");
    document.getElementById('circle6').classList.remove("filled");
    document.getElementById('circle6').classList.add("active");
    document.getElementById('add').value = "Continuar";
    document.getElementById('add').type = "button";
    document.getElementById('valuesToSubmit').style.display = "none";
    timesClicked--;
  }
})
for (let i = 1; i <= 12; i++) {
  document.getElementById(`input${i}`).addEventListener("input", () => {
    document.getElementById(`div${i}`).innerHTML = document.getElementById(`input${i}`).value
  })
}

html,
body {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #95afc0;
}

form {
  box-sizing: border-box;
  height: 1000%;
  width: 80%;
  margin: 20em;
  padding: 5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, .1);
  box-shadow: .1em .1em .2em .1em rgba(0, 0, 0, .1);
  background: #fff;
  border-radius: .3em;
}

form input[type="button"],
form input[type="submit"] {
  font-family: calibri;
  bottom: 1em;
  right: 1em;
  padding: .7em;
  margin: 1em 0;
  border: none;
  color: #fff;
  font-size: 1.35em;
  background: #0984e3;
  border-radius: .2em;
  outline: none;
  cursor: pointer;
  transition: .2s;
  font-weight: 300;
}

.container {
  display: flex;
  flex: 1;
}

.container div {
  font-size: 1em;
  font-family: calibri;
  font-weight: 100;
  text-align: left !important;
}

form input[type="button"]:hover,
form input[type="submit"]:hover {
  background: #341f97;
  color: #fff;
}

form input[type="text"],
form input[type="email"],
form input[type="password"] {
  font-family: arial;
  padding: 1em;
  border: none;
  box-shadow: .1em .1em .2em .1em rgba(0, 0, 0, .1);
  color: #000;
  font-size: 1.4em;
  background: none;
  border-radius: .2em;
  outline: none;
  transition: .2s;
}

.circles {
  display: flex;
}

::placeholder {
  color: #000;
  opacity: .2;
}

.circle {
  width: 1.5em;
  height: 1.5em;
  background: rgba(64, 115, 158, .7);
  margin: .5em;
  border-radius: 50%;
}

.active {
  background: #487eb0;
}

.filled {
  background: rgba(64, 115, 158, .3);
}

.visibleDiv {
  display: flex;
  align-items: center;
  position: relative;
}

#error {
  display: none;
  padding: 1em;
  color: #e55039;
  font-size: 1.5em;
  font-family: arial;
  position: absolute;
  top: -100%;
  width: 100%;
  animation: error;
  animation-duration: 1s;
}

@keyframes error {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    transform: translate(0);
  }
  40% {
    transform: translateY(.5em);
  }
  45% {
    transform: translate(-.5em);
  }
  50% {
    transform: translate(.5em);
  }
  55% {
    transform: translateY(-.5em);
  }
  60% {
    transform: translate(.5em);
  }
  65% {
    transform: translateY(-.5em);
  }
  70% {
    transform: translateY(.5em);
  }
  75% {
    transform: translate(-.5em);
  }
  80% {
    transform: translate(.5em);
  }
  85% {
    transform: translateY(-.5em);
  }
  90% {
    transform: translate(.5em);
  }
  95% {
    transform: translate(-.5em);
  }
  100% {
    transform: translate(.5em);
  }
}

#submitValues {
  font-family: calibri;
  display: none;
  font-size: 1.7em;
}

#valuesToSubmit {
  font-family: calibri;
  display: none;
  font-size: 1.5em;
}

.buttonsDiv {
  display: flex;
  align-items: center;
}

.buttonsDiv input {
  margin: 1.5em .1em !important;
}

input[type=range] {
  -webkit-appearance: none;
  background-color: transparent;
  width: 300px;
  height: 38px;
  padding-top: 10px;
  overflow: hidden;
  margin: 0;
  margin-left: -20px;
  transform-style: preserve-3d;
  perspective: 300;
  transform-origin: 50% 50% 300px;
  perspective-origin: 50% -121%;
  transform: skew(0deg);
  padding-right: .5em;
}

input[type=range]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  position: relative;
  -webkit-appearance: none;
  cursor: pointer;
  background-color: rgba(9, 132, 227, .5);
  width: 20px;
  height: 20px;
  z-index: 2;
  transition: .2s;
  padding: 1em;
  right: -.3em;
  border-radius: 50%;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: rgba(9, 132, 227, .7);
}

input[type=range]:before {
  content: "";
  position: absolute;
  background: rgb(190, 190, 190, .2);
  box-shadow: 0 1px 0 rgb(235, 235, 235);
  width: 300px;
  left: 5px;
  height: 1px;
  top: 29px;
  z-index: 1;
}

input[type=range]:after {
  content: "";
  position: absolute;
  width: 7px;
  left: 3px;
  border-radius: 50%;
  height: 6px;
  top: 27px;
  z-index: 1;
  box-shadow: 11px 0 0 rgb(190, 190, 190), 102.5px 0 0 rgb(190, 190, 190), 194px 0 0 rgb(190, 190, 190), 284px 0 0 rgb(190, 190, 190)
}

.notDisplay {
  display: none !important;
}

.columns {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.row {
  padding: 2em 0;
  display: flex;
  width: 100%;
}

.container>div {
  padding: 10px;
  display: flex;
  align-items: center;
  flex: 1;
}

<form action="registerNewUser.php" method="post" accept="utf-8" id="form" onsubmit="return confirm('Tem a certeza que quer adicionar esta profissão')">
  <div id="valuesToSubmit"></div>
  <button type="submit" disabled style="display: none"></button>
  <input type="hidden" name="username" id="username">
  <input type="hidden" name="email" id="email">
  <input type="hidden" name="password" id="password">
  <input type="hidden" name="passwordConfirm" id="passwordConfirm">
  <input type="hidden" name="phone" id="phone">
  <input type="hidden" name="attr1" id="attr1">
  <input type="hidden" name="attr2" id="attr2">
  <input type="hidden" name="attr3" id="attr3">
  <input type="hidden" name="attr4" id="attr4">
  <input type="hidden" name="attr5" id="attr5">
  <input type="hidden" name="attr6" id="attr6">
  <input type="hidden" name="attr7" id="attr7">
  <input type="hidden" name="attr8" id="attr8">
  <input type="hidden" name="attr9" id="attr9">
  <input type="hidden" name="attr10" id="attr10">
  <input type="hidden" name="attr11" id="attr11">
  <input type="hidden" name="attr12" id="attr12">
  <div class="visibleDiv">
    <input type="text" name="visibleInput" placeholder="Nome de utilizador" id="visibleInput" autofocus maxlength="70">
    <div id="error">Por favor digita um valor</div>
  </div>
  <div class="notDisplay" id="attributesDiv">
    <div class="columns">
      <div class="row">
        <div class="container">
          <div>Ler</div>
          <input type="range" min="1" max="4" value="1" name="ler" id="input1" required>
          <div id="div1">1</div>
        </div>
        <div class="container">
          <div>Escrever</div>
          <input type="range" min="1" max="4" value="1" name="escrever" id="input2" required>
          <div id="div2">1</div>
        </div>
      </div>
      <div class="row">
        <div class="container">
          <div>Contar</div>
          <input type="range" min="1" max="4" value="1" name="contar" id="input3" required>
          <div id="div3">1</div>
        </div>
        <div class="container">
          <div>Orientacao Espacial</div>
          <input type="range" min="1" max="4" value="1" name="orientacaoEspacial" id="input4" required>
          <div id="div4">1</div>
        </div>
      </div>
      <div class="row">
        <div class="container">
          <div>Locomoção</div>
          <input type="range" min="1" max="4" value="1" name="locomocao" id="input5" required>
          <div id="div5">1</div>
        </div>
        <div class="container">
          <div>Posturas</div>
          <input type="range" min="1" max="4" value="1" name="posturas" id="input6" required>
          <div id="div6">1</div>
        </div>
      </div>
      <div class="row">
        <div class="container">
          <div>Motricidade Geral</div>
          <input type="range" min="1" max="4" value="1" name="motricidadeGeral" id="input7" required>
          <div id="div7">1</div>
        </div>
        <div class="container">
          <div>Motricidade Fina</div>
          <input type="range" min="1" max="4" value="1" name="motricidadeFina" id="input8" required>
          <div id="div8">1</div>
        </div>
      </div>
      <div class="row">
        <div class="container">
          <div>Aptidões Sensoriais</div>
          <input type="range" min="1" max="4" value="1" name="aptidoesSensoriais" id="input9" required>
          <div id="div9">1</div>
        </div>
        <div class="container">
          <div>Trabalho em horário especial</div>
          <input type="range" min="1" max="4" value="1" name="trabalhoEmHorarioEspecial" id="input10" required>
          <div id="div10">1</div>
        </div>
      </div>
      <div class="row">
        <div class="container">
          <div>Trabalho num ambiente específico</div>
          <input type="range" min="1" max="4" value="1" name="trabalhoNumAmbienteEspecifico" id="input11" required>
          <div id="div11">1</div>
        </div>
        <div class="container">
          <div>Aptidões Intelectuais</div>
          <input type="range" min="1" max="4" value="1" name="aptidoesIntelectuais" id="input12" required>
          <div id="div12">1</div>
        </div>
      </div>
    </div>
  </div>
  <div class="buttonsDiv">
    <input type="button" name="previousValue" value="Anterior" id="previous">
    <input type="button" name="submitValue" value="Continuar" id="add">
  </div>
  <div class="circles">
    <div id="circle1" class="circle active"></div>
    <div id="circle2" class="circle"></div>
    <div id="circle3" class="circle"></div>
    <div id="circle4" class="circle"></div>
    <div id="circle5" class="circle"></div>
    <div id="circle6" class="circle"></div>
    <div id="circle7" class="circle"></div>
  </div>
</form>

css中可能有某种原因导致此问题，但是我不确定是什么，因为我花了至少3个小时的时间来弄清楚它，但我意识到我需要一些帮助。

Answer 1

我认为主要的问题是您正在通过正文CSS将表单居中。

如果您从正文CSS中删除justify-content: center;并使用更合理的说法margin: 5em;，我认为这可以解决您的问题。

您的css文件现在看起来像这样：

html,
body {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* justify-content: center; REMOVED */
  align-items: center;
  background: #95afc0;
}

form {
  box-sizing: border-box;
  height: 1000%;
  width: 80%;
  margin: 5em; /* CHANGED from 20em */
  padding: 5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, .1);
  box-shadow: .1em .1em .2em .1em rgba(0, 0, 0, .1);
  background: #fff;
  border-radius: .3em;
}

form input[type="button"],
form input[type="submit"] {
  font-family: calibri;
  bottom: 1em;
  right: 1em;
  padding: .7em;
  margin: 1em 0;
  border: none;
  color: #fff;
  font-size: 1.35em;
  background: #0984e3;
  border-radius: .2em;
  outline: none;
  cursor: pointer;
  transition: .2s;
  font-weight: 300;
}

.container {
  display: flex;
  flex: 1;
}

.container div {
  font-size: 1em;
  font-family: calibri;
  font-weight: 100;
  text-align: left !important;
}

form input[type="button"]:hover,
form input[type="submit"]:hover {
  background: #341f97;
  color: #fff;
}

form input[type="text"],
form input[type="email"],
form input[type="password"] {
  font-family: arial;
  padding: 1em;
  border: none;
  box-shadow: .1em .1em .2em .1em rgba(0, 0, 0, .1);
  color: #000;
  font-size: 1.4em;
  background: none;
  border-radius: .2em;
  outline: none;
  transition: .2s;
}

.circles {
  display: flex;
}

::placeholder {
  color: #000;
  opacity: .2;
}

.circle {
  width: 1.5em;
  height: 1.5em;
  background: rgba(64, 115, 158, .7);
  margin: .5em;
  border-radius: 50%;
}

.active {
  background: #487eb0;
}

.filled {
  background: rgba(64, 115, 158, .3);
}

.visibleDiv {
  display: flex;
  align-items: center;
  position: relative;
}

#error {
  display: none;
  padding: 1em;
  color: #e55039;
  font-size: 1.5em;
  font-family: arial;
  position: absolute;
  top: -100%;
  width: 100%;
  animation: error;
  animation-duration: 1s;
}

@keyframes error {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    transform: translate(0);
  }
  40% {
    transform: translateY(.5em);
  }
  45% {
    transform: translate(-.5em);
  }
  50% {
    transform: translate(.5em);
  }
  55% {
    transform: translateY(-.5em);
  }
  60% {
    transform: translate(.5em);
  }
  65% {
    transform: translateY(-.5em);
  }
  70% {
    transform: translateY(.5em);
  }
  75% {
    transform: translate(-.5em);
  }
  80% {
    transform: translate(.5em);
  }
  85% {
    transform: translateY(-.5em);
  }
  90% {
    transform: translate(.5em);
  }
  95% {
    transform: translate(-.5em);
  }
  100% {
    transform: translate(.5em);
  }
}

#submitValues {
  font-family: calibri;
  display: none;
  font-size: 1.7em;
}

#valuesToSubmit {
  font-family: calibri;
  display: none;
  font-size: 1.5em;
}

.buttonsDiv {
  display: flex;
  align-items: center;
}

.buttonsDiv input {
  margin: 1.5em .1em !important;
}

input[type=range] {
  -webkit-appearance: none;
  background-color: transparent;
  width: 300px;
  height: 38px;
  padding-top: 10px;
  overflow: hidden;
  margin: 0;
  margin-left: -20px;
  transform-style: preserve-3d;
  perspective: 300;
  transform-origin: 50% 50% 300px;
  perspective-origin: 50% -121%;
  transform: skew(0deg);
  padding-right: .5em;
}

input[type=range]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  position: relative;
  -webkit-appearance: none;
  cursor: pointer;
  background-color: rgba(9, 132, 227, .5);
  width: 20px;
  height: 20px;
  z-index: 2;
  transition: .2s;
  padding: 1em;
  right: -.3em;
  border-radius: 50%;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: rgba(9, 132, 227, .7);
}

input[type=range]:before {
  content: "";
  position: absolute;
  background: rgb(190, 190, 190, .2);
  box-shadow: 0 1px 0 rgb(235, 235, 235);
  width: 300px;
  left: 5px;
  height: 1px;
  top: 29px;
  z-index: 1;
}

input[type=range]:after {
  content: "";
  position: absolute;
  width: 7px;
  left: 3px;
  border-radius: 50%;
  height: 6px;
  top: 27px;
  z-index: 1;
  box-shadow: 11px 0 0 rgb(190, 190, 190), 102.5px 0 0 rgb(190, 190, 190), 194px 0 0 rgb(190, 190, 190), 284px 0 0 rgb(190, 190, 190)
}

.notDisplay {
  display: none !important;
}

.columns {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.row {
  padding: 2em 0;
  display: flex;
  width: 100%;
}

.container>div {
  padding: 10px;
  display: flex;
  align-items: center;
  flex: 1;
}

希望这会有所帮助。如果没有，请告诉我。

一些div元素位于顶部（页面外）

1 个答案: