Question

我有两个使用以下属性设置的 div 元素：

.elem1 {
    width: 47.5%;
    margin-right: 2.5%;
    display: inline-block;
}

.elem2 {
    width: 47.5%;
    margin-right: 2.5%;
    display: inline-block;
}

注意：如果我将边距缩小为 2.25% ，则当父级为 时，元素将内联。 body 即可。如果然后我将它们换成另一个较窄的 div ，则第二个元素会再次中断到下一行。

由于父 100% 的总数达到 width ，为什么这些元素未定位为内联< / strong>以及如何解决此问题，以便始终将其置于内联？

我基本上想要 float ，而不使用 float 属性。

您可以查看以下小提琴，以获得更好的视觉效果：

The parent element is the body.

The parent element is the body and the margin is reduced to 2.35%.

The parent element is another div that has 75% of the body's width.

解决方案必须仅在CSS中，并且仅在两个 elem 元素中，因为用户可能没有设置父容器。

Answer 1

内联元素允许写入常规文本，因此，由于换行符，假设您在div元素之间添加了一个空格。这导致div元件之间的额外空间，这导致div元件不适合在同一条线上。我通常在元素之间添加注释以覆盖此行为，并作为提醒自己和其他可能查看代码的人。

<div class="elem1" style="height: 50px; background-color: black;"></div><!--
   This comment is added to prevent space in-between these elements.
--><div class="elem2" style="height: 50px; background-color: black;"></div>

Answer 2

默认情况下，

display: inline-block;后面有一些空格。要删除它，请使用font-size: 0作为.container

这是example。

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 75%;
  font-size: 0;
  border: 1px solid red;
  margin: 0 auto;
  position: relative;
  display: inline-block;
}

.elem1 {
  width: 47.5%;
  margin-right: 2.25%;
  display: inline-block;
}

.elem2 {
  width: 47.5%;
  margin-right: 2.25%;
  display: inline-block;
}

＆＃13;

<div class="container">
  <div class="elem1" style="height: 50px; background-color: black;"></div>
  <div class="elem2" style="height: 50px; background-color: black;"></div>
</div>

＆＃13;

Here是一篇关于文本行之间空格的精彩文章。

Answer 3

如果您有浏览器支持，则可以将display: flex添加到包含元素。在此示例中，我将其放在body。

上

body {
  display: flex;
}

.elem1 {
  width: 47.5%;
  margin-right: 2.5%;
  display: inline-block;
}

.elem2 {
  width: 47.5%;
  margin-right: 2.5%;
  display: inline-block;
}

<div class="elem1" style="height: 50px; background-color: black;"></div>
<div class="elem2" style="height: 50px; background-color: black;"></div>

它也适用于你的第三个例子。我将display: flex添加到.container。

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 75%;
  border: 1px solid red;
  margin: 0 auto;
  position: relative;
  display: flex;
}

.elem1 {
  width: 47.5%;
  margin-right: 2.25%;
  display: inline-block;
}

.elem2 {
  width: 47.5%;
  margin-right: 2.25%;
  display: inline-block;
}

<div class="container">
  <div class="elem1" style="height: 50px; background-color: black;"></div>
  <div class="elem2" style="height: 50px; background-color: black;"></div>
</div>

Answer 4

经过一些研究后，我最终赞成使用负利润率，因为目前它是最受支持的方式与其他优秀的，有效的解决方案相反（ font-size: 0; ， display: flex ）。

为了使其成功，我添加了以下内容：

.elem2 {
    margin-left: calc(2.5% - 4px);
}

元素不显示内联

4 个答案: