使用margin-left: auto将元素对齐到右侧

Question

我想将一个元素向右对齐。我知道应该使用float:right来将元素对齐到右边，但是我的项目很复杂，我需要了解为什么margin:0 0 0 auto;在某些情况下可以将元素对齐到右侧，而在其他情况下却不起作用。

当容器是flex容器时，margin:0 0 0 auto;会将元素对齐到右边，如您在此示例中所见：

div {
  display: flex;
  width: 400px;
  background: #eee;
}

span {
  margin: 0 0 0 auto;
}

<div>
  <span>test</span>
</div>

但是当容器不是弹性布局容器时，项目仍然停留在左侧：

div {
  width: 400px;
  background: #eee;
}

span {
  margin: 0 0 0 auto;
}

<div>
  <span>test</span>
</div>

所以我的问题是：

• 是否可以在不使用 flex 容器的情况下，通过设置边距将项目与右侧对齐？
• flexbox 的示例是否按预期工作，还是出现了 bug？

- Roland Soós

Answer 1

1. 在flexbox中使用自动margin会覆盖默认对齐方式。这篇文章进行了解释。
2. 将自动margin应用于内联元素，如<span>，则会被忽略。自动margin适用于块级元素，并且如果比包含它的元素小，则会明显看出。如果没有给它任何宽度，则默认情况下块级元素是100％。请参见代码片段。

代码片段

div {
  width: 400px;
  background: #eee;
}

span {
  margin: 0 0 0 auto;
  display: block;
  width: 100px;
  border: 1px dashed red;
}

<div>
  <span>test</span>
</div>

- zer00ne

---

在你的示例中，是否可以在 span 上使用自动边距而不需要指定 span 的 100 像素宽度？ - Roland Soós

刚刚编辑了一下，解释了为什么在这种情况下<span>不是一个好的元素。所以你看到的是一个伪装成<span>的<div>。 - zer00ne

好的，我明白了，但是带有display:block; width:auto;的span似乎不起作用。有没有办法让它起作用？ - Roland Soós

什么不起作用？代码片段显示在右侧的跨度是正确的吗？还是你指的是文本？你可以使用 text-align:right 让它紧贴边缘。 - zer00ne

在你的例子中，你在span上指定了width:100px;，它可以正常工作。但是如果你在span上使用width:auto;而不是100px，它就无法工作。 - Roland Soós

使用 text-align:right，因为在自动模式下，块的宽度为100%。 - zer00ne

Answer 2

这既不是flex的bug，也与边距无关。你总是可以给任何内容添加边距，但这里发生的是，

情况1（使用display: flex）：

简单来说，flex总是期望填充容器，因此它会用边距填充剩余空间。在这里，您已经给出了margin: 0 0 0 auto。所以你指定了顶部为0，右侧为0，底部为0，左侧为auto。由于您将左侧指定为auto，flexbox会用边距填充元素的左侧，因此该元素看起来出现在右侧。

但更好的方法是给一个特定的margin-left而不是auto，并将justify-content属性应用于容器。

div {
  justify-content: flex-end;
  display: flex;
  width: 400px;
  background: #eee;
}

span {
  margin: 0 0 0 0; //can be 0 or 10px or any exact value.
}

在情况2中： 您没有提及任何显示类型，因此默认为block，在块中，它不会像弹性盒子一样期望容器被填满。因此，在margin: 0 0 0 auto中，自动被视为0。所以内容被放置在左侧。 在块中没有直接的方式可以像在弹性盒子中使用justify-content对齐。但可以通过多种方式实现，例如使用float，将位置设置为absolute并将右侧设置为0。 个人而言，我喜欢在对齐方面使用flex。

- Amir Suhail

---

"display: static" 是无效的，应该使用 "position: static"，而且 OP 的示例中都没有使用任何 "position" 属性。你对 flex 本身的理解是正确的。 - zer00ne

感谢您发现了这个问题。是的，static是无效的，div的默认值为block。已经根据此进行了更新。 - Amir Suhail