代码之家  ›  专栏  ›  技术社区  ›  Micolho

使用css垂直设置输入和标签标签的格式

  •  1
  • Micolho  · 技术社区  · 6 年前

    我有这个HTML和CSS代码,是一个窗体…

    我尝试了其他问题中找到的另一个解决办法,但我不能对齐。 input 以及 labels “垂直”…

    有人能帮我吗?

    备注:在我的浏览器中( 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 回复  |  直到 6 年前
        1
  •  1
  •   StefanBob    6 年前

    不知道为什么 <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>