logo标签列表

将3个元素放在同一行中

htmlcss
3

我在HTML中有三个元素，如下：

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

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

感谢您提前的回答。

将 display: flex 添加到容器中。 - Michael Benjamin
4个回答
4
正如其他人提到的，使用display: inline-block时，即使在元素标签之间，空格也会被计算在渲染中。有一些方法可以解决这个问题。
  1. Setting display: table-cell rather than inline-block can work in a simple situation like this; just note that it prevents the blocks from wrapping
  2. You can set font-size:0; on the parent to get rid of the whitespace, but you'll have to reset it on all the direct children.

  3. Unless you have to support pre-IE10 browsers, I'd recommend flexbox here! You may need to add some browser prefixes, but the base would look like this (name your parent element something better than 'parent', though!):

    .parent { display: flex; }
.navigation, .sidebar { flex: 1 }
.content { flex: 2 }

    What that snippet is saying is "make the children fit, and make .content twice as big as the other two".

0

即使您删除了填充、边距和边框，内联元素实际上仍对代码本身中的空格敏感。删除它们，它们就会对齐：

.navigation {
  display: inline-block;
  width: 25%;
}
.content {
  display: inline-block;
  width: 50%;
}
.sidebar {
  display: inline-block;
  width: 25%;
}
* {
  margin: 0;
  padding: 0;
  border: 0;
}
<nav class="navigation">Navigation</nav><section class="content">Section</section><aside class="sidebar">Aside</aside>

0

当你使用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>

这个选项 + j08691 和 @kyojimaru 是在使用 display: inline-block 时从容器中移除空格的三种最常见的选项。 - kamus
0

这是因为你使用了display:inline-block的样式，它会在代码中有空格（无论是空格还是换行符）时识别并创建元素间的空格。因此，你只需要像j08691 这里所回答的那样删除空格即可。

或者你也可以使用注释来删除空格，就像这样：

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接