inline-block elements not aligning horizontally

Question

I am unable to align inline-block elements horizontally. From what I've found, there is some baseline alignment in inline-block elements but I couldn't get how. It is working if I use 'vertical-align : top'. I have the following doubts :

How is the baseline positioned in this sample code.
On removing the 'display : inline-block' from the .icon-bar class, the first three elements align properly. How?
On marking the ul as 'display : inline' after the previous step, it gets aligned. But not with 'display : inline-block'
How to align the elements horizontally. Can it be done without the 'vertical-align' property?
Can elements marked as display:inline be parents of elements display:block. Similarly, does 'display : inline-block' parent and 'display:block' child cause any problems? Also, does a 'display:block' child in a 'display: inline-block' parent extend to full page width or the parents width?

body {
  margin: 0;
}
div.header {
  background-color: #f5df5f;
  height: 50px;
}
.drawer_section,
.logo_section,
.search_section,
.header_links_section {
  //vertical-align: top;
  height: 50px;
  //border: 2px thick black;
  display: inline-block;
  background: green;
  opacity: 0.5;
}
.drawer_section {
  width: 100px;
  text-align: center;
}
.logo_section,
.search_section {
  width: 200px;
  text-align: center;
}
.drawer_icon {
  display: inline-block;
  width: 30px;
  text-align: center;
  //line-height: 3px;

}
.icon-bar {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 20px;
  height: 5px;
  border-bottom: 2px solid red;
}
.header_links_section > ul {
  list-style: none;
  background-color: red;
  //display: inline;
  display: inline-block;
}
.header_links_section > ul > li {
  text-align: center;
  display: inline-block;
  background: yellow;
  width: 35px;
  //height: 15px;
  //margin: 0 5px;

}

<div class="header">
  <div class="drawer_section">
    <!-- <div class="drawer_icon">----</div> -->
    <div class="drawer_icon">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
  </div>

  <div class="info_section">Hi There</div>

  <div class="search_section">
    <span class="search_bar">
				<input type="text" name="search"
					placeholder="Search" />
      </span>
  </div>
  <div class="links_section">
    <ul>
      <li><a href="#">Link1</a>
      </li>
      <li><a href="#">Link2</a>
      </li>
      <li><a href="#">Link3</a>
      </li>
    </ul>
  </div>

</div>

Please Check out here : http://codepen.io/anon/pen/ggByVv

I know about float. But it should be working with inline-block too. Also, I had read that using inline-block should be preferred over float. — Harpreet Singh

muratkh muratkh · Accepted Answer · 2017-02-10T00:02:31

put all sections under one class name so you don't have to keep adding classes like below. vertical alignment is not set they size according to content inside divs

.drawer_icon,.logo_section,.search_section,.header_links_section {
  vertical-align: top;
  position: relative;
  display: inline-block;
}

inline-block elements not aligning horizontally

2 Answers