Search code examples
htmlcssalignmenthtml-lists

Align input into list element


I would like to align my list as follow

enter image description here

The problem is the input box is stuck in "high" position.

Here is my code.

#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>


Solution

  • use display:inline-block and vertical-align:middle in li

    #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>