内联块元素未水平对齐答案

【问题标题】：inline-block elements not aligning horizontally内联块元素未水平对齐
【发布时间】：2017-02-09 23:56:03
【问题描述】：

我无法水平对齐 inline-block 元素。根据我的发现，内联块元素中有一些基线对齐，但我不知道如何。如果我使用'vertical-align：top'，它就可以工作。我有以下疑惑：

基线在此示例代码中是如何定位的。
在从 .icon-bar 类中删除 'display : inline-block' 时，第一个三个元素正确对齐。怎么样？
在上一步之后将 ul 标记为“display : inline”时，它会对齐。但不是 'display : inline-block'
如何水平对齐元素。可以不使用“vertical-align”属性吗？
可以将元素标记为 display:inline 是元素 display:block 的父级。同样，确实 'display : inline-block' 父级和 'display:block' 子级导致任何问题？此外，在“显示”中是否有“显示：阻止”子级： inline-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

【问题讨论】：

使用float: left
我知道浮动。但它也应该与 inline-block 一起使用。另外，我读过使用 inline-block 应该比 float 更受欢迎。

标签： html css

【解决方案1】：

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

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

【讨论】：

垂直对齐：顶部；为我修好了

【解决方案2】：

我看到了你的代码，除非元素的容器有足够的宽度来保持它们内联，否则元素不能作为内联块对齐。在你的 CSS 中，你设置了 'width: 30px;'对于 '.drawer_icon' 不考虑每个 '.icon bar' 的宽度为 20px，因此除非您增加容器的宽度，否则它们不会内联。如果您坚持保持容器的宽度和内部元素的宽度相同，您可能必须使容器能够水平滚动。

【讨论】：