分工的位置下降

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之外的任何其他内容）都会将我们移回到包含块中。

.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?

Answer 2

您需要设置＆＃34; .items＆＃34;与＆＃34; .main_menu＆＃34;相同的高度和行高，这里的诀窍是：

vertical-align: middle;
line-height: [whatever]px;

http://codepen.io/anon/pen/qpazy