html - 师的位置下降

Question

正如您在图片中看到的，我的元素正在导航菜单的下方。我的html是这样的

<div class="main_menu">
    <a class="item">
        <img id="logo" src="../Data/site_images/Demicon.png">
    </a>
    <div class="item">
        <input id="searchbox">
    </div>
    <div class="item">
        <input id="searchbox2">
    </div>

</div>

而对应的css是

body {
  margin: 0px;
}

.main_menu {
  background-color: #369740;
  position: fixed;
  top: 0px;
  height: 50px;
  width: 100%;
}

.main_menu .item {
  display: inline-block;
  height: 100%;
}

.main_menu #logo {
  margin-left: 42px;
  margin-top: 8px;
  margin-right: 42px;
}

请解释如何将其更改为 div 以便它像在 css 中一样完全占据父元素，或者解释如何更改输入元素的位置。

JSFiddle Link

Answer 1

设置vertical-align: middle(或者top，除了默认的baseline之外的任何东西)让我们回到包含 block .

.main_menu .item {
  display: inline-block;
  height: 100%;
  vertical-align: middle;  
}

调整填充/等。之后的元素由您决定。

示例:http://codepen.io/paulroub/pen/FzIuy

一些背景:Why is this inline-block element pushed downward?