我在 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属性(property)？
预先感谢您的回答。
最佳答案
正如其他人所提到的，问题是当使用 display: inline-block 时，空白——甚至在元素标签之间——在渲染中被考虑在内。有几种方法可以解决这个问题。
- 设置
display: table-cell而不是inline-block可以在像这样的简单情况下工作；请注意，它会阻止 block 包装 - 您可以在父级上设置
font-size:0;以去除空格，但您必须在所有直接子级上重新设置它。 除非您必须支持 IE10 之前的浏览器，否则我建议您在此处使用 flexbox!您可能需要添加一些浏览器前缀，但基础看起来像这样(尽管将您的父元素命名为比“parent”更好的名称!):
.parent { display: flex; } .navigation, .sidebar { flex: 1 } .content { flex: 2 }该片段所说的是“让 children 适应，并使
.content是其他两个的两倍”。
关于html - 在同一行中放置 3 个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39070695/