HTML 输入不考虑包含 div 的 CSS 高度答案

【问题标题】：HTML Inputs Not respecting CSS Height of containing divHTML 输入不考虑包含 div 的 CSS 高度
【发布时间】：2014-07-14 23:33:51
【问题描述】：

我正在使用<input> 标签创建用户界面，特别是text 和button。我想要的界面是让两个文本框相互叠放，在堆叠框的右侧有一个按钮，两个文本框的高度相同。

我可以使用以下 HTML 和 CSS 实现此布局，但是输入元素似乎不尊重样式表中定义的高度。

HTML：

<!doctype html>
<div id = "container">
  <div class = "control">
     <input type = "text">
     <input type = "text">
  </div>
  <div class = "control">
     <input type = "button">
  </div>
</div>

CSS：

/* dimensions are simplified here */
#container {
   width: 300px;
}
.control {
  float: left;
  height: 200px;
}
.control input[type=text] {
   height: 50%; /* would expect each box to be 100px tall */
   clear: both;
   width: auto;
}
.control input[type=button] {
   height:100%; /*would expect this button to be the same height as both boxes */
   width: auto;
}

我尝试过关注类似的问题，例如发布的here，但无济于事。我的输入确实遵循我用上图说明的模式，但是它们似乎不尊重高度并且未对齐。 HTML 5 控件是否存在与生俱来的不相称的地方？

【问题讨论】：

你的 CSS 中有一个 = 而不是 :。
你知道height = 50% 不正确……对吧？
提示：修正您的 CSS: #contaner 中的这个错字。
@JamesMontagne 我会解决这个问题，虽然这不是我遇到的问题，因为这篇文章中的代码并不是我项目中的逐字记录......我稍微修改了缩进等把它放在 SO 上，这只是陷入了交火。
提示 #2：在设置属性/属性时，不要在 = 之前/之后添加空格。

标签： html css css-float

【解决方案1】：

我相信input[type=text] 与input[type=button] 有不同的盒子模型

因此，您可以通用设置盒子模型，也可以仅在 input[type=text] 上设置

JSfiddle Demo

CSS

.control {
    float: left;
    height: 200px;
    width:50%;
}
.control input[type=text] {
    height: 50%;
    /* would expect each box to be 100px tall */
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.control input[type=button] {
    height:100%;
    /*would expect this button to be the same height as both boxes */
    width:auto;
}

【讨论】：

谢谢，这非常有帮助，适用于所有用例:)

【解决方案2】：

这就是你要找的东西

小提琴： fiddle

HTML

<div id = "container">
  <div class = "control">
      <input type = "text"/>
         <br/>
      <input type = "text"/>
  </div>
  <div class = "control">
      <input type = "button"/>
  </div>
</div>

CSS

#contaner {
   width: 300px;
}
.control {
  float: left;
  height: 200px;
}
.control input[type=text] {

   clear: both;
   width: auto;
}
.control input[type=button] {
   height:25%; 
   width: auto;
}

【讨论】：

height = 50%; 是错误的。这没有解决任何问题，按钮的高度只是调整为文本输入的默认高度。
@JamesMontagne height = 50%; 在哪里？