Форматирование ввода и метки тегов css по вертикали - PullRequest
Новая
       26

Форматирование ввода и метки тегов css по вертикали

0 голосов
/ 11 июня 2018

У меня есть этот HTML и CSS-код, который является формой ...

Я пробовал другие решения, которые я нашел в других вопросах, и я не могу совместить input и labels "вертикально "...

Кто-нибудь может мне помочь?

PS .: в моем браузере (Firefox) это выглядит так на этом изображении ... enter image description here

<style type="text/css">.modal {
  background-color: rgba(0, 0, 0, 0.4);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: fixed;
  color: #B1EBF9;
}

.close {
  color: #111;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

#divMain,
.post-menu {
  filter: blur(5px);
}

.close:hover,
.close:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}

.modal-content {
  background-color: #3B474C;
  float: center;
  /*        border: 1px solid #000;
*/
  width: 35%;
  height: 35%;
  padding: 1%;
  opacity: 1;
  margin-left: 40%;
  margin-right: 40%;
  margin-top: 20%;
  margin-bottom: 20%;
  text-align: center;
  border-radius: 15px;
}

#up input {
  /*background-color: #546E7A;*/
  text-align: center;
  appearance: none;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
  min: 0;
}

input {
  background-color: #3B474C;
  color: #B1EBF9;
  border: 2px #28C953 solid;
  border-radius: 50px;
  padding-top: 2%;
  padding-bottom: 2%;
  margin-top: 1%;
}

#buttonUpdate {
  background-color: #28C953;
  margin-top: 3%;
  border: 2px #28C953 solid;
  border-radius: 50px;
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 6%;
  padding-right: 6%;
  color: #3B474C;
  font-weight: bold;
}

</style>
<div id="popup" class="modal" onclick="if (event.target == document.getElementById('popup')){window.location = '/dashboard/clientBackup/';}">
  <div class="modal-content">
    <form action="" method="post">
      <div id="up">
        <input name="csrfmiddlewaretoken" value="S90LWPAUTykZXspFHHUQ1JXCBRnzXHK2PfgDvTO2mShTEzxI1csOWLQRQbQQgt5q" type="hidden">
        <p>
          <label for="id_identificador">Identificador:</label>
          <input name="identificador" value="devserver-fd" required="" id="id_identificador" maxlength="200" type="text">
        </p>
        <p>
          <label for="id_email">Email:</label>
          <input name="email" value="example@example.com" required="" id="id_email" maxlength="200" type="text">
        </p>
        <p>
          <label for="id_n_jobs">N jobs:</label>
          <input name="n_jobs" value="1" required="" id="id_n_jobs" type="number">
        </p>
      </div>
      <input id="buttonUpdate" value="Update" type="submit"><br>
    </form>
  </div>
</div>

1 Ответ

0 голосов
/ 11 июня 2018

Не уверен, почему у вас есть <p> теги в качестве контейнеров для меток input + вместо <div>, но я просто использовал display: flex; и flex-direction: column; для вертикальной ориентации.

Итак, последнеестиль для form p - это единственное, что я изменил.

Если вы хотите, чтобы надписи были выровнены, например, просто добавьте: 

form p label {
  align-self: flex-start;
}


<style type="text/css">.modal {
  background-color: rgba(0, 0, 0, 0.4);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: fixed;
  color: #B1EBF9;
}

.close {
  color: #111;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

#divMain,
.post-menu {
  filter: blur(5px);
}

.close:hover,
.close:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}

.modal-content {
  background-color: #3B474C;
  float: center;
  /*        border: 1px solid #000;
*/
  width: 35%;
  height: 35%;
  padding: 1%;
  opacity: 1;
  margin-left: 40%;
  margin-right: 40%;
  margin-top: 20%;
  margin-bottom: 20%;
  text-align: center;
  border-radius: 15px;
}

#up input {
  /*background-color: #546E7A;*/
  text-align: center;
  appearance: none;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
  min: 0;
}

input {
  background-color: #3B474C;
  color: #B1EBF9;
  border: 2px #28C953 solid;
  border-radius: 50px;
  padding-top: 2%;
  padding-bottom: 2%;
  margin-top: 1%;
}

#buttonUpdate {
  background-color: #28C953;
  margin-top: 3%;
  border: 2px #28C953 solid;
  border-radius: 50px;
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 6%;
  padding-right: 6%;
  color: #3B474C;
  font-weight: bold;
}

form p {
display: flex;
flex-direction: column;
}

</style>
<div id="popup" class="modal" onclick="if (event.target == document.getElementById('popup')){window.location = '/dashboard/clientBackup/';}">
  <div class="modal-content">
    <form action="" method="post">
      <div id="up">
        <input name="csrfmiddlewaretoken" value="S90LWPAUTykZXspFHHUQ1JXCBRnzXHK2PfgDvTO2mShTEzxI1csOWLQRQbQQgt5q" type="hidden">
        <p>
          <label for="id_identificador">Identificador:</label>
          <input name="identificador" value="devserver-fd" required="" id="id_identificador" maxlength="200" type="text">
        </p>
        <p>
          <label for="id_email">Email:</label>
          <input name="email" value="example@example.com" required="" id="id_email" maxlength="200" type="text">
        </p>
        <p>
          <label for="id_n_jobs">N jobs:</label>
          <input name="n_jobs" value="1" required="" id="id_n_jobs" type="number">
        </p>
      </div>
      <input id="buttonUpdate" value="Update" type="submit"><br>
    </form>
  </div>
</div>
...