Question

我正在尝试制作表单，但是我无法正确输入输入元素。

经过大量测试，我发现是由font-size引起的...当像素为20px或以下时，输入可以均匀均匀地堆叠，但是当我输入21px或更高时，顶部输入与其余输入之间的差距。我认为21px及更高版本成为问题的原因是因为这使得所有四个输入的总和都比父元素（form-element）高，这很奇怪，因为父div没有一个定义的高度，因此应根据该内容设置 ...

body{
    font-family: helvetica, sans-serif;
    font-size: 150%;
}

input{
    font-size: 20px;
    border-radius: 5px;
    border: 1px solid grey;
    width: 320px;
    display: inline-block;
    background-color: orange;
    color: red;
    float: right;
    white-space: nowrap;
}
label{
    width: 120px;
    display: inline-block;
    background-color: pink;
    white-space: nowrap;
}

#wrapper{
    width: 600px;
    background-color: red;
    margin: 0 auto;
}

.form-element{
    background-color: blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="testFile.css" type="text/css">
    <title>Form</title>
</head>
<body>
   
   <div id="wrapper">
     
         <div class="form-element">
          <label for="email">Email</label>
          <input type="text" name="email" id="email" placeholder="e.g. yourname@gmail.com">
        </div>

       <div class="form-element">
          <label for="phone">Telephone</label>
          <input type="text" name="phone" id="phone">
        </div>

       <div class="form-element">
          <label for="password">Password</label>
          <input type="password" name="password" id="password">
        </div>

       <div class="form-element">
          <label for="passwordConfirm">Confirm</label>
          <input type="password" name="passwordConfirm" id="passwordConfirm">
        </div> 
   </div>
   
   <script type="text/javascript">
    
    
       
    </script>
    
</body>
</html>

为什么会出现这种差距？如何防止这种情况？

字体大小超过20像素时浮动元素之间的间距

0 个答案: