Question

为什么高度文本框小于按钮？

我的代码：

 #container {
  overflow: auto;
  line-height: 100%;
  border: 1px solid red;
}
.t,#but {
   float: left;
}
#but ,.txt {
   border: 1px solid #999;
   padding: 10px; 
   font-size: 20px;  
}

<div id="container">
 <div class="t">
 <input type="text" class="txt" name="">
 </div>
 <div id="but"><span>Search</span></div>
</div>

Answer 1

<input>元素是被替换的元素之一，而在CSS中，replaced element是一个表示超出CSS范围的元素。它有一些来自浏览器用户代理样式表的特殊样式，默认情况下它们不会被继承，例如font-family，font-size，line-height等，这些规则可以确定一个框的高度。

您可以通过设置<property>: inherit;强制他们继承，以便<input type="text">可以继承<div class="t">及其父<div id="container">等的样式，这样就可以了能够获得与<div id="but">相同的样式，以使它们具有相同的高度。

您可以直接在输入框中设置这些特定样式，但使用inherit可以防止覆盖规则。

#container {
  font-size: 20px;
  overflow: auto;
}

.t,
#but {
  float: left;
}

.txt {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.txt,
#but {
  border: 1px solid #999;
  padding: 10px;
}

<div id="container">
  <div class="t">
    <input type="text" class="txt" name="">
  </div>
  <div id="but"><span>Search</span></div>
</div>

此外，在我认为的实际案例中，您将使用<button>代码而不是<div>按钮。要使输入字段和按钮具有相同的高度，您还需要直接为它们设置相同的padding值。

#container {
  font-size: 20px;
  overflow: auto;
}

.t,
#but {
  float: left;
}

.txt,
#but {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  border: 1px solid #999;
  padding: 10px;
}

<div id="container">
  <div class="t">
    <input type="text" class="txt" name="">
  </div>
  <button id="but"><span>Search</span></button>
</div>

Answer 2

浏览器以不同的方式处理差异html元素和属性我在chrome developer工具中检查它的计算选项卡，并找出输入字段渲染高度不同，在顶部和底部多1 px，所以它设置为2 px实际高度。

这些行将解决您的问题，请检查代码段以了解如何应用它们。

font-size:16px;
line-height:16px;
height:16px;  
font-family:sans-serif;

#container {
  overflow: auto;
  line-height: 100%;
  border: 1px solid red;
}
.t,#but {
   float: left;
}
#but ,.txt {
   border: 1px solid #999;
   padding: 10px;
   font-size:16px;
   line-height:16px;
   height:16px;
   font-family:sans-serif;
   
}

<div id="container">
 <div class="t">
 <input type="text" class="txt" name="" placeholder="write a name" />
 </div>
 <div id="but"><span>Search</span></div>
</div>

Answer 3

/ 你需要做这样的事情，尽管系统之间可能存在一些差异。 /

==

Answer 4

尝试将font-size提供给所有元素，它们将变得相等height。

#container {
  overflow: auto;
  line-height: 100%;
  border: 1px solid red;
}

.t,
#but {
  float: left;
}

#but,
.txt {
  border: 1px solid #999;
  padding: 10px;
  font-size: 14px;
}

<div id="container">
  <div class="t">
    <input type="text" class="txt" name="">
  </div>
  <div id="but"><span>Search</span></div>
</div>

Answer 5

问题在于font-size。

请尝试将font-size提供给您的所有元素，例如以下小提琴：

＆＃13;

#container {
  overflow: auto;
  line-height: 100%;
  border: 1px solid red;
}

.t,
#but {
  float: left;
}

#but,
.txt {
  border: 1px solid #999;
  padding: 10px;
  font-size: 14px;
}

＆＃13;

<div id="container">
  <div class="t">
    <input type="text" class="txt" name="">
  </div>
  <div id="but"><span>Search</span></div>
</div>

＆＃13;

Answer 6

这不是有效的选择器：

line-height: 100%;

您必须定义容器的高度，或用以下内容包装内部内容：

.container .wrap{
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}

然后将高度：100％设置为#but元素。

为什么高度文本框小于按钮？

6 个答案: