Question

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

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

代码段如下：

注意：我已将框大小设置为边框。因此，我认为即使使用1px边框，这也会使两个内部div都精确地为200px。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

.inner

＆＃13;

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

＆＃13;

Answer 2

您需要删除HTML标记之间不必要的空格或将font-size重置为0。

在这里查看：

<强> Fighting the Space Between Inline Block Elements

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

另外你可以使用display：block;漂浮：左转。

Answer 3

边界。边框将为每个框添加2个像素，因此内容实际上是404像素，并且它不适合400像素宽的div。

Answer 4

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

CSS：为什么这个内联块div不显示在同一行？

4 个答案: