Question

我正在使用<input>标记创建用户界面，特别是text和button。我想要的界面是两个文本框在彼此的顶部，一个按钮是堆叠框右侧两个文本框的高度。

The Desired Layout

我可以使用以下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控件是否存在固有的不相称之处？

Text Boxes Seem Taller Than Buttons

Answer 1

我认为input[type=text]与[{1}}

的盒子模型不同

因此，您可以普遍设置框模型，也可以只设置input[type=button]

JSfiddle Demo

<强> CSS

input[type=text]

Answer 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;
}

HTML输入不尊重包含div的CSS高度

2 个答案: