Question

我无法水平对齐内联块元素。根据我的发现，内联块元素中存在一些基线对齐，但我无法理解。如果我使用＆lt; vertical-align：top＆＃39;它正在工作。我有以下疑问：

基线如何在此示例代码中定位。
从.icon-bar类中删除＆＃39; display：inline-block＆＃39; 时，第一个三个元素正确对齐。怎么样？
将 ul 标记为＆＃39; display：inline＆＃39;在上一步之后，它会对齐。但不能使用＆＃39; display：inline-block＆＃39;
如何水平对齐元素。没有＆＃39; vertical-align＆＃39;它可以完成吗？属性？
元素可以标记为 display：inline是元素显示的父元素：块。同样，也可以＆＃39;显示：内联块＆＃39;父母和＆＃39;显示：阻止＆＃39;孩子导致任何问题？此外，＆＃39;显示：阻止＆＃39;显示的孩子：内联块＆＃39; parent扩展到整页宽度或父级宽度β

＆＃13;

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;

}

＆＃13;

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

＆＃13;

请在此处查看：http://codepen.io/anon/pen/ggByVv

Answer 1

将所有部分放在一个类名下，这样您就不必继续添加如下所示的类。根据divs中的内容

，它们的大小没有设置垂直对齐方式

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

Answer 2

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

内联块元素未水平对齐

2 个答案: