html - 为什么 `<input/>`会拖父div？

Question

input 元素似乎拖累了父级 div。为什么会这样？我该如何解决？

html

  <div class="main">
    <div class="one">
    </div>
    <div class="two">
      <input type="text" /> <!-- Without this input, the page looks fine -->
    </div>
    <div class="three">
    </div>
  </div>

CSS

.main>div {
  display: inline-block;
  height: 330px;
}

.one {
  width: 18%;
  background-color: #fbfbfb;
}

.two {
  margin-left:10px;
  width: 50%;
  border: 2px solid #ddd;
}

.three {
  margin-left: 10px;
  width: 20%;
  background-color: #bbb;
  border: 5px dashed #ddd;
}

这是效果:http://jsbin.com/gubozapove/edit?output

Answer 1

这是因为你给出了:display: inline-block;。要解决此问题，请提供:

vertical-align: top;

预览

原因默认情况下，内联 block 元素倾向于与基线对齐。

fiddle :http://jsbin.com/kitazeweqi/1/edit?output