CSS：为什么这个 inline-block div 不在同一行显示？答案

【问题标题】：CSS: Why does this inline-block div not display on the same line?CSS：为什么这个 inline-block div 不在同一行显示？
【发布时间】：2014-11-24 12:14:33
【问题描述】：

我一直在尝试在 div 元素上使用 display:inline-block，我正在尝试找出为什么我的两个内部 div 元素没有显示在同一行。两个 div 的宽度都设置为 200px，它们的父 div 设置为 400px。

如果我将内部 div 设置为向左浮动而不是使用 inner-block 它会按预期工作。

sn-p代码如下：

注意：我已将 box-sizing 设置为 border-box。所以我假设这会使两个内部 div 都精确到 200px，即使是 1px 边框。

* {
  box-sizing: border-box;
}
html,
body {
  padding: 0;
  margin: 0
}
.container {
  width: 400px;
}
.inner {
  border: 1px solid black;
  padding: 10px 0;
  width: 200px;
  display: inline-block;
}

<h1>Why does this display on two lines?</h1>
<div class="container">
  <div class="inner">Testing border box property</div>
  <div class="inner">Second div</div>
</div>

【问题讨论】：

标签： css

【解决方案1】：

您可以通过将 font-size:0px; 添加到父元素 (.container) 然后将 font-size（例如 16px）添加到子 (.inner) 元素来删除 inline-block 元素之间的空白。

* {
  box-sizing: border-box;
}
html,
body {
  padding: 0;
  margin: 0
}
.container {
  width: 400px;
  font-size:0px;
}
.inner {
  border: 1px solid black;
  padding: 10px 0;
  width: 200px;
  display: inline-block;
  font-size: 16px;
}

<h1>Why does this display on two lines?</h1>
<div class="container">
  <div class="inner">Testing border box property</div>
  <div class="inner">Second div</div>
</div>

【讨论】：

啊，空白！谢谢！或者，我可以在同一行代码中使用两个内部 div，两个元素之间没有任何空格。

【解决方案2】：

您需要删除 HTML 标记之间不必要的空格或将字体大小重置为 0。

在这里查看：

Fighting the Space Between Inline Block Elements

上面的链接有更多的解决方案。

另外你可以使用 display:block; float:left 代替。

【讨论】：

【解决方案3】：

边界。边框会给每个框增加2个像素，所以内容实际上是404像素，不适合400像素宽的div。

【讨论】：

我已将 box-sizing 设置为border-box。那么内部div的宽度不应该正好是200px吗？
我刚才看到了。这应该。尝试添加“float:left;”和“显示：块；”而不是“显示：内联块；” - 这应该工作。这增加了对 clearfix 的需求:(
你说得对，float 有效，但我真的很想知道为什么 inner-block 无效！
我不知道，我正在寻找答案，但还没有找到任何好的答案:(
@neodymium 看看这个 - css-tricks.com/fighting-the-space-between-inline-block-elements

【解决方案4】：

容器 div 中的空间不足。将容器 div 更改为 404px 以考虑每个内部 div 的左侧和右侧

【讨论】：