在同一行中放置 3 个元素答案

【问题标题】：Fit 3 elements in the same line在同一行中放置 3 个元素
【发布时间】：2016-08-22 11:26:06
【问题描述】：

HTML 中有 3 个元素如下：

.navigation {
  display: inline-block;
  width: 25%;
}
.content {
  display: inline-block;
  width: 50%;
}
.sidebar {
  display: inline-block;
  width: 25%;
}

<nav class="navigation">Navigation</nav>
<section class="content">Section</section>
<aside class="sidebar">Aside</aside>

这应该适合容器的 100% 宽度（<body> 或任何其他 <div>）。然而.sidebar 被放到下一行。我尝试使用!important 定义（只是为了测试）将边框、边距和填充设置为0，但结果是一样的。如何将这 3 个元素放在同一行中并保持 width 属性？

提前感谢您的回答。

【问题讨论】：

Add display: flex to the container.

标签： html css

【解决方案1】：

正如其他人所提到的，问题是在使用display: inline-block 时，空格——甚至在元素标签之间——在渲染中也会被考虑在内。有几种方法可以解决这个问题。

设置display: table-cell 而不是inline-block 可以在这样的简单情况下工作；请注意，它可以防止块包装
您可以在父级上设置 font-size:0; 以消除空格，但您必须在所有直接子级上重置它。
除非您必须支持 IE10 之前的浏览器，否则我会在这里推荐 flexbox！您可能需要添加一些浏览器前缀，但基础看起来像这样（不过，将您的父元素命名为比“父”更好的名称！）：
```
.parent { display: flex; }
.navigation, .sidebar { flex: 1 }
.content { flex: 2 }
```
那个 sn-p 的意思是“让孩子们适应，让.content 比其他两个大一倍”。

【讨论】：

【解决方案2】：

即使您删除了内边距、边距和边框，内联元素实际上对代码本身的空白也很敏感。删除它，他们会排队：

.navigation {
  display: inline-block;
  width: 25%;
}
.content {
  display: inline-block;
  width: 50%;
}
.sidebar {
  display: inline-block;
  width: 25%;
}
* {
  margin: 0;
  padding: 0;
  border: 0;
}

&lt;nav class="navigation"&gt;Navigation&lt;/nav&gt;&lt;section class="content"&gt;Section&lt;/section&gt;&lt;aside class="sidebar"&gt;Aside&lt;/aside&gt;

【讨论】：

【解决方案3】：

当您使用显示内联块时，它将代码中的空间作为一个字符（空格），因此，您有 100% + 2 个字符所需的空间，您可以保持代码的格式和“删除”容器之间的空间，将父级的字体大小设置为 0

.container{
    font-size:0; 
}
.container *{
    font-size:12px;
}
.navigation {
  display: inline-block;
  width: 25%;
}
.content {
  display: inline-block;
  width: 50%;
}
.sidebar {
  display: inline-block;
  width: 25%;
}

<div class="container">
<nav class="navigation">Navigation</nav>
<section class="content">Section</section>
<aside class="sidebar">Aside</aside>
</div>

【讨论】：

此选项 + j08691 和 @kyojimaru 是使用 display: inline-block 时删除容器中空格的三个最常用选项

【解决方案4】：

这是因为您使用display:inline-block 的样式，如果您的代码有空格（空格或换行符），它将识别并在元素之间创建一个空格，所以您需要做的就是删除空格喜欢j08691 here的回答

或者您可以使用类似这样的注释来删除间距

.navigation {
  display: inline-block;
  width: 25%;
}
.content {
  display: inline-block;
  width: 50%;
}
.sidebar {
  display: inline-block;
  width: 25%;
}

<nav class="navigation">Navigation</nav><!--
--><section class="content">Section</section><!--
--><aside class="sidebar">Aside</aside>

或者其他方式是使用样式 margin 就像在这个例子中一样，background 仅用于可视化 inline-block 元素的大小

.navigation {
  display: inline-block;
  width: 25%;
  margin: 0 -0.4em 0 0; background: red;
}
.content {
  display: inline-block;
  width: 50%;
  margin: 0 -0.4em 0 0; background: green;
}
.sidebar {
  display: inline-block;
  width: 25%;
  margin: 0 -0.4em 0 0; background: blue;
}

<nav class="navigation">Navigation</nav>
<section class="content">Section</section>
<aside class="sidebar">Aside</aside>

【讨论】：