将输入对齐到列表元素答案

【问题标题】：Align input into list element将输入对齐到列表元素
【发布时间】：2016-08-21 01:02:57
【问题描述】：

我想按如下方式排列我的列表

问题是input 框卡在“高”位置。

这是我的代码。

#menu {
	float: right;
	width: 700px;
	margin: 0 auto;
	padding: 0;
}

#menu ul {
	float: right;
	margin: 0;
	padding: 10px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
	padding: 0px 0px 0px 0px;
}

#menu a {
	display: block;
	margin-right: 1px;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 300;
	color: #585858;
	border: none;
}

#menu .current_page_item a {
	text-decoration: none;
	color: #FFFFFF;
}

#menu .current_page_item a {
	background: #2AA8D2;
	border-radius: 5px;
}

		<div id="menu">
			<ul  style = "display:block">
				<li><input type="text" placeholder = "Search"/>&nbsp&nbsp<span class="glyphicon glyphicon-search"></span></li>
				<li><a href="#">Portals</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Language</a></li>
				<li><a href="#">Log In</a></li>
			</ul>
		</div>

【问题讨论】：

标签： html css alignment html-lists

【解决方案1】：

在li 中使用display:inline-block 和vertical-align:middle

#menu {
  float: right;
  width: 700px;
  margin: 0 auto;
  padding: 0;
  border-bottom: 5px red solid
}
#menu ul {
  float: right;
  margin: 0;
  padding: 10px 0px 0px 0px;
  list-style: none;
  line-height: normal;
  display:block
}
#menu li {
  display:inline-block;
  vertical-align:middle;
  padding: 0;
}
#menu a {
  display: block;
  margin-right: 1px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: #585858;
  border: none;
}
#menu .current_page_item a {
  text-decoration: none;
  color: #FFFFFF;
}
#menu .current_page_item a {
  background: #2AA8D2;
  border-radius: 5px;
}

<div id="menu">
  <ul>
    <li>
      <input type="text" placeholder="Search" />&nbsp&nbsp<span class="glyphicon glyphicon-search"></span>
    </li>
    <li><a href="#">Portals</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Language</a>
    </li>
    <li><a href="#">Log In</a>
    </li>
  </ul>
</div>

【讨论】：