html - 使用 css 垂直格式化输入和标签标签

Question

我有这个 HTML 和 css 代码，它是一个表单...

我尝试了在其他问题中找到的另一种解决方案，但我无法“垂直”对齐 input 和 labels ...

谁能帮帮我？

PS.: 在我的浏览器 (Firefox) 中它看起来像这张图片......

---

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

Answer 1

不确定你为什么有 <p>标签作为输入+标签的容器而不是<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>