两个内联块元素，每个 50% 宽，不能并排放置在一行中答案

【问题标题】：Two inline-block elements, each 50% wide, do not fit side by side in a single row两个内联块元素，每个 50% 宽，不能并排放置在一行中
【发布时间】：2013-08-18 05:02:18
【问题描述】：

<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
}
</style>
</head>
<body>
    <div id="left">Left</div>
    <div id="right">Right</div>
</body>
</html>

JSFiddle：http://jsfiddle.net/5EcPK/

上面的代码试图将#left div和#right div并排放置在一行中。但正如您在上面的 JSFiddle URL 中看到的那样，情况并非如此。

我能够解决将其中一个 div 的宽度减小到 49% 的问题。见http://jsfiddle.net/mUKSC/。但这不是一个理想的解决方案，因为两个 div 之间出现了一个小间隙。

我能够解决问题的另一种方法是浮动两个 div。见http://jsfiddle.net/VptQm/。这很好用。

但我原来的问题仍然存在。为什么当两个 div 都作为 inline-block 元素保存时，它们不能并排放置？

【问题讨论】：

标签： html css

【解决方案1】：

css3 中的好答案是：

white-space: nowrap;

在父节点中，并且：

white-space: normal;
vertical-align: top;

在 div（或其他）中为 50%

示例：http://jsfiddle.net/YpTMh/19/

编辑：

还有另一种方法：

font-size: 0;

用于父节点并在子节点中覆盖它

EDIT 2021：个人，我建议现在使用 flexbox：https://the-echoplex.net/flexyboxes/

【讨论】：

【解决方案2】：

更新：现在是 2021 年，使用 flexbox 甚至更好 - CSS grid layout 而不是 inline-block。

当使用inline-block 元素时，总会有whitespace 这些元素之间的问题（该空间大约为 4px 宽）。

所以，你的两个 divs，它们都有 50% 的宽度，加上 whitespace(~ 4px) 的宽度超过 100%，所以它坏了。您的问题示例：

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

有几种方法可以解决这个问题：

1.这些元素之间没有空格

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

&lt;div class="left"&gt;foo&lt;/div&gt;&lt;div class="right"&gt;bar&lt;/div&gt;

2。使用 HTML cmets

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><!--
--><div class="right">bar</div>

3.将父级font-size 设置为0，然后为inline-block 元素添加一些值

body{
  margin: 0; /* removing the default body margin */
}

.parent{
  font-size: 0;  /* parent value */
}

.parent > div{
  display: inline-block;
  width: 50%;
  font-size: 16px; /* some value */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="parent">
  <div class="left">foo</div>
  <div class="right">bar</div>
</div>

4.在它们之间使用负边距 (not preferable)

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
  margin-right: -4px; /* negative margin */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

5.下降闭合角度

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div
><div class="right">bar</div>

<hr>

<div class="left">foo</div><div class="right">
bar</div>

6.跳过certain HTML 结束标签（感谢@thirtydot 提供reference）

body{
  margin: 0; /* removing the default body margin */
}

ul{
  margin: 0; /* removing the default ul margin */
  padding: 0; /* removing the default ul padding */
}

li{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<ul>
  <li class="left">foo
  <li class="right">bar
</ul>

参考资料：

作为@MarcosPérezGude said，最佳方法是使用rem，并在html标签上为font-size添加一些默认值（如HTML5Boilerplate） .示例：

html{
    font-size: 1em;
}

.ib-parent{             /* ib -> inline-block */
    font-size: 0;
}

.ib-child{
    display: inline-block;
    font-size: 1rem;
}

【讨论】：

@hoosierEE 这不是废话。元素之间的空间很好，这是因为 inline-block 元素将定位在文本行。如果你在一行中放一个空格，就会有一个空格。所以行为是正确的，即使你认为这是一个问题（正如 Vucko 所说的那样）。
我同意@MarcosPérezGude，这种行为是正确的。正如您从我的帖子中看到的那样，有几种方法可以删除该空格（我自己使用 HTML cmets 来删除空格）。但如果你介意那个空白，你可以随时使用flexbox、table/table-row/table-cell 或float。
我完美地使用了内联块。我的正常做法是parent { font-size:0; } child {font-size: 1rem; }。现在使用 rems 是最简单的
制表符仍然被解析为空格有点烦人。我以前从未见过删除结束标记修复，这有任何不稳定或副作用吗？
还要确保 border 已关闭。如果您浮动 div，这可以增加空间。

【解决方案3】：

Flexbox 示例 - 这将用于包含两个并排元素的父类。

.parentclass {
  display: flex;
  justify-content: center;
  align-items: center; 
}

取自Vertically centering a div inside another div

【讨论】：

【解决方案4】：

请检查以下代码：

body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
    float:left;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
    float:left;
}

<div id="left">Left</div>
<div id="right">Right</div>

【讨论】：

【解决方案5】：

将 float: left; 添加到两个 div 标签。

div {
  float: left;
}

【讨论】：

【解决方案6】：

要么使它们成为块而不是内联块。这将使 div 忽略它们之间的空格。

display:block;

或删除标签之间的空格

<div id='left'></div><div id='right'></div>

或添加

margin: -1en;

到其中一个 div 以减少渲染的单个空间占用的空间。

【讨论】：

【解决方案7】：

可以通过将 css display:inline 添加到包含内联元素的 div 中来完成。

在使用负值边距删除空白时，有必要将其添加到此特定元素。因为将其添加到类中会影响使用该类的地方。

所以使用 display:inline; 会更安全

【讨论】：

【解决方案8】：

因为元素之间有空格。如果删除所有空格，they will fit。

<div id="left">Left</div><div id="right">Right</div>

【讨论】：

【解决方案9】：

这是因为两个 div 之间的空格被解释为空格。如果你把你的<div>标签放在problem is corrected下面的行中：

<div id="left"></div><div id="right"></div>

【讨论】：