輸入框樣式不正常

我已將註冊表格居中。我也創建了一個標籤並使用了一個顯示塊。但是，我的輸入框並未在頂部顯示該行。爲什麼它不能正常工作，即使我沒有設置行類的高度？我希望它會根據我的行類的內容自動變大。請參閱我的形象：你需要添加之間的空間文本框的輸入框樣式不正常

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    width: auto; 
 
    font-family: "Gidole", sans-serif; 
 
} 
 

 
h1{ 
 
    padding: 15px; 
 
    text-align: center; 
 
} 
 

 

 
@font-face { 
 
    font-family: "Gidole"; 
 
    src: url(CODE Light.otf); 
 
} 
 

 

 
.container { 
 
    width: 960px; 
 
    height: 600px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    position: relative; 
 
    background: red; 
 
    top: 50px 
 
} 
 

 
.row { 
 
    width: 320px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left:50%; 
 
    transform: translate(-50%,-50%); 
 
    color: #191919; 
 
    background-color: #F2FFFA; \t 
 
    font-family: "Gidole", sans-serif; 
 
    padding: 10px 55px 40px; \t 
 

 
} 
 

 
label { 
 
    max-width:300px; 
 
    display: block; 
 
    text-align:left; 
 
} 
 

 
input { 
 
    width: 100%; 
 
} 
 

 
#submit { 
 
    display: block; 
 
    width: 100%; 
 
    padding: 5px 10px 5px 10px; 
 
    color: #ffffff; 
 
    background-color: #B73737;; 
 
} 
 

 
select { 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="row"> 
 

 
    <div class="myForm"> 
 
     <form action="register.php" method="POST"> 
 
     <h1> Create an account</h1> <br/> 
 
     <?php echo registration_error($errors1); ?> 
 
     <label for="">Username</label><input type="text" name="username" size="30" /> <br/><br/> 
 
     <label for="">Password</label><input type="password" name="password" size="30"/> <br/><br/> 
 
     <label for="">First Name</label><input type="text" name="firstName" size="30" /> <br/><br/> 
 
     <label for="">Last Name</label><input type="text" name="lastName" size="30"> <br/><br/> 
 
     <label for="">Email address</label><input type="text" name="email" size="30"> <br/><br/> 
 
     <label for="">Gender</label><select name="gender" id="gender" > 
 
      <option value="male"> Male </option> 
 
      <option value="female"> Female </option> 
 
      <option value="others"> Others </option> 
 
      <option value="others"> Prefer not to say </option> 
 
     </select> <br/><br/> 
 
      <label for="">Age</label><input type="number" name="age"> <br/><br/> 
 
     <div class="center"> 
 
      <input type="submit" name="submit" value="Register" id="submit"> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-02-28 studentAir01

所以你需要設置'border'？ – Huelfe

我需要知道爲什麼頂部邊框沒有在輸入框中顯示。 – studentAir01

創建一個顯示你的問題的jsfiddle。也許你有一個瀏覽器縮放或類似的東西。 – Huelfe

這就是原因，您應該更喜歡使用CSS Reset。因爲，你的代碼在IE中是完美的。

box-sizing您代碼的屬性設置爲瀏覽器默認值即box-sizing:content-box;。因此，top-border是越來越隱蔽由於在borders

最佳實踐採取的是使用CSS Reset或Normalizer.css

加入box-sizing: border-box;修復您的代碼大小。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    /* try commenting this property */ 
 
} 
 

 
body { 
 
    width: 100%; 
 
    font-family: "Gidole", sans-serif; 
 
} 
 

 
h1 { 
 
    padding: 15px; 
 
    text-align: center; 
 
} 
 

 
.container { 
 
    width: 960px; 
 
    height: 600px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    position: relative; 
 
    background: red; 
 
    top: 50px 
 
} 
 

 
.row { 
 
    width: 320px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    color: #191919; 
 
    background-color: #F2FFFA; 
 
    font-family: "Gidole", sans-serif; 
 
    padding: 10px 55px 40px; 
 
} 
 

 
label { 
 
    max-width: 300px; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
input { 
 
    width: 100%; 
 
} 
 

 
#submit { 
 
    display: block; 
 
    width: 100%; 
 
    padding: 5px 10px 5px 10px; 
 
    color: #ffffff; 
 
    background-color: #B73737; 
 
    ; 
 
} 
 

 
select { 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="myForm"> 
 
     <form action="register.php" method="POST"> 
 
     <h1> Create an account</h1> <br/> 
 
     <?php echo registration_error($errors1); ?> 
 
     <label for="">Username</label><input type="text" name="username" size="30" /> <br/><br/> 
 
     <label for="">Password</label><input type="password" name="password" size="30" /> <br/><br/> 
 
     <label for="">First Name</label><input type="text" name="firstName" size="30" /> <br/><br/> 
 
     <label for="">Last Name</label><input type="text" name="lastName" size="30"> <br/><br/> 
 
     <label for="">Email address</label><input type="text" name="email" size="30"> <br/><br/> 
 
     <label for="">Gender</label><select name="gender" id="gender"> 
 
        <option value="male"> Male </option> 
 
        <option value="female"> Female </option> 
 
        <option value="others"> Others </option> 
 
        <option value="others"> Prefer not to say </option> 
 
       </select> <br/><br/> 
 
     <label for="">Age</label><input type="number" name="age"> <br/><br/> 
 
     <div class="center"> 
 
      <input type="submit" name="submit" value="Register" id="submit"> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-03-01 06:13:03

感謝您的提示！我感謝你的幫助。現在正在工作。 – studentAir01

太棒了！您可以將我的答案標記爲正確並關閉它。 –

標籤元素被重疊的頂部，所以添加上邊距您輸入元素

input { 
     width: 100%; 
     margin-top:3px; 
}

* { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 

 
    body { 
 
     width: auto; 
 
     font-family: "Gidole", sans-serif; 
 
    } 
 

 
    h1{ 
 
     padding: 15px; 
 
     text-align: center; 
 
    } 
 

 

 
    @font-face { 
 
     font-family: "Gidole"; 
 
     src: url(CODE Light.otf); 
 
    } 
 

 

 
    .container { 
 
     width: 960px; 
 
     height: 600px; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     position: relative; 
 
     background: red; 
 
     top: 50px 
 
    } 
 

 
    .row { 
 
     width: 320px; 
 
     position: absolute; 
 
     top: 50%; 
 
     left:50%; 
 
     transform: translate(-50%,-50%); 
 
     color: #191919; 
 
     background-color: #F2FFFA; 
 
     font-family: "Gidole", sans-serif; 
 
     padding: 10px 55px 40px;  
 

 
    } 
 

 
    label { 
 
     max-width:300px; 
 
     display: block; 
 
     text-align:left; 
 
    } 
 

 
    input { 
 
     width: 100%; 
 
     margin-top:3px; 
 
    } 
 

 
    #submit { 
 
     display: block; 
 
     width: 100%; 
 
     padding: 5px 10px 5px 10px; 
 
     color: #ffffff; 
 
     background-color: #B73737;; 
 
    } 
 

 
    select { 
 
     width: 100%; 
 
    }

<div class="container"> 
 
    <div class="row"> 
 

 
     <div class="myForm"> 
 
      <form action="register.php" method="POST"> 
 
       <h1> Create an account</h1> <br/> 
 
       
 
       <label for="">Username</label><input type="text" name="username" size="30" /> <br/><br/> 
 
       <label for="">Password</label><input type="password" name="password" size="30"/> <br/><br/> 
 
       <label for="">First Name</label><input type="text" name="firstName" size="30" /> <br/><br/> 
 
       <label for="">Last Name</label><input type="text" name="lastName" size="30"> <br/><br/> 
 
       <label for="">Email address</label><input type="text" name="email" size="30"> <br/><br/> 
 
       <label for="">Gender</label><select name="gender" id="gender" > 
 
        <option value="male"> Male </option> 
 
        <option value="female"> Female </option> 
 
        <option value="others"> Others </option> 
 
        <option value="others"> Prefer not to say </option> 
 
       </select> <br/><br/> 
 
       <label for="">Age</label><input type="number" name="age"> <br/><br/> 
 
       <div class="center"> 
 
        <input type="submit" name="submit" value="Register" id="submit"> 
 
       </div> 
 
      </form> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-02-28 15:14:42 Sajan

輸入框樣式不正常

回答

相關問題