行内块元素无法水平对齐

Question

我无法水平对齐内联块元素。根据我找到的资料，内联块元素中有一些基线对齐，但我无法理解其中的原理。

如果我使用'vertical-align：top'，它就能够工作。

我有以下疑问：

1. 在此示例代码中基线如何定位。
2. 从.icon-bar类中删除"display:inline-block"后，前三个元素会正确对齐。怎么做到的？
3. 在执行上一步骤后将ul标记为"display:inline"时，它会得到对齐。但是不使用"display:inline-block"。
4. 如何水平对齐这些元素。可以不使用"vertical-align"属性吗？
5. 被标记为"display:inline"的元素可以是"display:block"元素的父元素吗？同样，"display:inline-block"父元素和"display:block" 子元素会有什么问题? 在"display:inline-block"父元素中,一个"display:block"子元素是否会延伸到整个页面宽度或父元素的宽度?

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>

请查看这里：http://codepen.io/anon/pen/ggByVv。

- Harpreet Singh

---

使用 float: left。 - pol

我知道浮点数。但它也应该与inline-block一起使用。另外，我曾读到过使用inline-block比float更好。 - Harpreet Singh

Answer 1

将所有部分都放在一个类名下，这样您就不必像下面这样不断添加类。垂直对齐未设置，它们根据div内的内容进行调整大小。

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

- muratkh

---

vertical-align: top; 对我来说修复了它。 - Jeffrey Nicholson Carré

Answer 2

我看了你的代码，除非元素的容器有足够的宽度将它们设置为inline-block，否则无法对齐。 在你的CSS中，你为“.drawer_icon”设置了“width: 30px;”，但没有考虑到每个“.icon bar”的宽度是20px，所以除非你增加容器的宽度，否则它们不会在同一行上。 如果你坚持保持容器的宽度和内部元素的相同宽度，那么你可能需要使你的容器可以水平滚动。

- SFM