Question

我在HTML中有3个元素如下：

＆＃13;

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

＆＃13;

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

＆＃13;

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

提前感谢您的回答。

Answer 1

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

设置display: table-cell而不是inline-block可以在这样的简单情况下工作;请注意，它会阻止块包裹
您可以在父级上设置font-size:0;以删除空格，但您必须在所有直接子级上重置它。
除非您必须支持IE10以前的浏览器，否则我建议您使用flexbox！您可能需要添加一些浏览器前缀，但基数看起来像这样（将您的父元素命名为比'parent'更好的东西！）：
```
.parent { display: flex; }
.navigation, .sidebar { flex: 1 }
.content { flex: 2 }
```
该片段的内容是“让孩子们健康，并使.content两倍于其他两个”。

Answer 2

即使您删除了填充，边距和边框，内联元素实际上对代码本身的空白区域也很敏感。删除它，然后排队：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

当您使用display inline-block时，它会将代码中的空格作为一个字符（空格），因此，您有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>

Answer 4

这是因为您正在使用display:inline-block的样式，如果您的代码有空格（空格或新行），它将识别并在元素之间创建空格，那么你是什么我们需要做的就是删除j08691 here

所回答的空格

或者你可以使用像这样的评论删除间距

＆＃13;

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

＆＃13;

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

＆＃13;

或者其他方式使用样式margin，例如，background用于仅显示inline-block元素的大小

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

在同一行中放置3个元素

4 个答案: