Question

我正在尝试制作表格，但是我遇到了一些严重的问题...

我的input高度设置为100％，其父级设置为30px，但是，实际上输入的高度超过30px ...因此我将padding和{ {1}}至margin ...仍然没有。

代码：

body{
    font-family: helvetica, sans-serif;
}

input{
    width: 320px;
    height: 100%;
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: top;
    }
.label13{
    padding: 0;
    margin: 0;
    width: 250px;
    height:100%;
    display: inline-block;
    white-space: nowrap;
    background-color: red;
    vertical-align: top;
}
.label24{
    padding: 0;
    margin: 0;
    width: 250px;
    height:100%;
    display: inline-block;
    white-space: nowrap;
    background-color: blue;
    vertical-align: top;
}

#wrapper{
    width: 600px;
}

.form-element{
    height: 30px;
}

我添加了一些颜色以便于理解。

您看到的是前三个 seem 符合正确的高度，但事实并非如此，它只是以这种方式出现，因为它们与顶部垂直对齐；如果我将高度设置为200％，您会看到文本远远低于可见的输入本身，并最终消失。

是什么原因造成的？我希望输入的高度与标签的高度相同。

Answer 1

将box-sizing: border-box;添加到CSS中。

https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

否则，您的边框顶部和底部的输入高度实际上是100％+ 2px。通过使用box-sizing: border-box;，您是在告诉它在计算出的高度中包括边框，因此它永远不会高于100％。

body{
    font-family: helvetica, sans-serif;
}

input{
    width: 320px;
    height: 100%;
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    }
.label13{
    padding: 0;
    margin: 0;
    width: 250px;
    height:100%;
    display: inline-block;
    white-space: nowrap;
    background-color: red;
    vertical-align: top;
}
.label24{
    padding: 0;
    margin: 0;
    width: 250px;
    height:100%;
    display: inline-block;
    white-space: nowrap;
    background-color: blue;
    vertical-align: top;
}

#wrapper{
    width: 600px;
}

.form-element{
    height: 30px;
}

<!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="formValidation.css" type="text/css">
    <title>Form</title>
</head>
<body>
   
   <div id="wrapper">
     
         <div class="form-element">

          <label class="label13" for="email">Email</label>
          <input type="text" name="email" id="email" placeholder="e.g. yourname@gmail.com">
        </div>

       <div class="form-element">
          <label class="label24" for="phone">Telephone</label>
          <input type="text" name="phone" id="phone" placeholder="e.g. 778-333-3215">
        </div>

       <div class="form-element">
          <label class="label13" for="password">Password</label>
          <input type="password" name="password" id="password">
        </div>

       <div class="form-element">
          <label class="label24" for="passwordConfirm">Confirm Password</label>
          <input type="password" name="passwordConfirm" id="passwordConfirm">
        </div> 
   </div>
   
   <script type="text/javascript">
    
    
       
    </script>
    
</body>
</html>

为什么我的输入不符合其父级的身高？

1 个答案: