为什么`<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;

预习

原因:baseline默认情况下,内联块元素倾向于对齐.

小提琴:http://jsbin.com/kitazeweqi/1/edit？output