HTML 和 CSS 代码中，两个子盒子为什么无法横向排列？

哈喽！今天心血来潮给大家带来了《HTML 和 CSS 代码中，两个子盒子为什么无法横向排列？》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

为什么两个子盒无法横向排列？

以下 html 和 css 代码中，两个子盒子 box1 和 box2 预期应该横向排列，但实际却没有：

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
  height: 300px;
  width: 500px;
}

.box1 {
  display: inline-flex;
  width: 50%;
  height: 100%;
  background-color: #87CEFA;
}

.box2 {
  display: inline-flex;
  height: 100%;
  width: 50%;
  background-color: #FFC0CB;
}

这是因为给子盒子设置了 inline-flex 的 display 属性。inline-flex 属性使得子盒子作为行内元素在父容器中排列，而行内元素之间默认会有 1em/4 的间隙。因此，两个 50% 宽度的子盒子无法在父容器中横向排列。

要解决这个问题，可以将父元素的 display 属性修改为 flex，然后将子盒子的 display 属性修改为 block 或 flex。这样，子盒子将作为块级元素或弹性盒模型元素进行排列，并且可以按照预期横向排列。

到这里，我们也就讲完了《HTML 和 CSS 代码中，两个子盒子为什么无法横向排列？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！