91 
<!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 元素时，它们不能并排放置？

4

9 回答 9

150

更新：因为它是 2021 年，使用flexbox甚至更好 - CSS 网格布局而不是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;
}
<div class="left">foo</div><div class="right">bar</div>

2. 使用 HTML 注释

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.在它们之间使用负边距（不优选）

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. 跳过某些HTML 结束标签（感谢@thirtydot 提供参考）

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>

参考：

  1. 在 CSS 技巧上对抗内联块元素之间的空间
  2. 删除行内块元素之间的空格 by David Walsh
  3. 如何删除行内块元素之间的空间？

正如@MarcosPérezGude 所说，最好的方法是使用, 并在标签上rem添加一些默认值（如HTML5Boilerplate）。例子：font-sizehtml

html{
    font-size: 1em;
}

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

.ib-child{
    display: inline-block;
    font-size: 1rem;
}
于 2013-08-15T21:41:01.647 回答
26

css3 中的好答案是：

white-space: nowrap;

在父节点中，并且：

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

在 div（或其他）中为 50%

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

编辑：

还有另一种方法：

font-size: 0;

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

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

于 2015-02-03T19:13:39.173 回答
7

这是因为两个 div 之间的空格被解释为空格。如果您将<div>标签按如下所示排列，则问题已得到纠正：

<div id="left"></div><div id="right"></div>
于 2013-08-15T21:41:09.570 回答
4

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

display:block;

或删除标签之间的空格

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

或添加

margin: -1en;

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

于 2013-08-15T21:39:55.813 回答
4

因为元素之间有空格。如果您删除所有空格，它们将适合.

<div id="left">Left</div><div id="right">Right</div>
于 2013-08-15T21:41:29.650 回答
2

请检查以下代码：

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>

于 2019-04-08T12:04:54.807 回答
1

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

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

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

于 2014-11-05T14:16:03.673 回答
1

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

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

取自在另一个 div 中垂直居中一个 div

于 2019-04-08T11:55:09.027 回答
0

添加浮动：左；到两个 div 标签。

div {
  float: left;
}

于 2018-12-14T04:59:45.037 回答