CSS：我可以按边距右对齐元素吗：0 0 0 auto？

Posted 2023-03-06

【中文标题】CSS：我可以按边距右对齐元素吗：0 0 0 auto？

【英文标题】：CSS: May I right-align an element by margin: 0 0 0 auto?

【发布时间】：2012-08-27 20:56:55

【问题描述】：

我可以通过设置 margin-left 来右对齐一个元素

margin: 0 0 0 auto;

但不浮动

float: right;

?

我不知道这是否正确，但它在 Chrome 和 Safari 中都有效。

========

A.K 的回答正是我所需要的；

这也很有帮助，来自 Praveen Kumar： 可以，但支持有限。它仅适用于 Chrome 和 Safari。我猜甚至在 Firefox 中也没有。看，如果你打算只针对 Chrome 浏览器，是的，你可以。所有基于 -webkit- 的浏览器都支持这一点，但不支持其他浏览器。选择是你的。 :)

【问题讨论】：

你为什么要这样做？

在那个 div 中做对：0

你也可以做 padding-right:0

我不知道你想达到什么目的，但你可以使用 text-align:right 来实现这个

因为居中对齐一个元素使用这个 - margin: 0 auto;所以....

【参考方案1】：

解决方案 1：使用定位

如果不通过浮动，您可以使用 定位。父元素为position: relative;，元素为position: absolute;，left: auto;，其他元素为0。

CSS

.parent position: relative;
.parent .child position: absolute; left: auto; right: 0; width: 150px; height: 50px;​​​

HTML

<div class="parent">
    <div class="child">
        Content
    </div>
</div>​

小提琴：http://jsfiddle.net/U3JXk/小提琴：http://jsfiddle.net/U3JXk/1/（带边框）

解决方案 2：重置显示属性

如果您不愿意使用定位，可以尝试将元素的display 属性更改为inline，并将text-align 用作right。

CSS

.parent text-align: right;
.parent .child display: inline;
/* OR */
.parent .child display: inline-block; *display: inline; *zoom: 1;

HTML

<div class="parent">
    <div class="child">
        Content
    </div>
</div>

​ 小提琴：http://jsfiddle.net/U3JXk/2/ 小提琴：http://jsfiddle.net/U3JXk/3/（带边框）

【讨论】：

这仍然会将元素从页面流中取出，我认为 OP 希望避免这种情况。

可能是，只是尝试一下。让我们等待OP响应。 :)

谢谢，但我想知道：我可以按边距右对齐元素吗：0 0 0 auto？为什么？

可以，但支持有限。它仅适用于 Chrome 和 Safari。我猜甚至在 Firefox 中也没有。看，如果你打算只针对 Chrome 浏览器，是的，你可以。所有基于-webkit- 的浏览器都支持这一点，但不支持其他浏览器。选择是你的。 :)

@Praveen Kumar 你是对的，它在 Firefox 中不起作用。谢谢！

【参考方案2】：

是的，您可以通过设置margin-left:auto来右对齐元素

但请看下面margin 和float 结果之间的区别：

Margin

margin CSS 属性设置所有四个边的边距。这是避免将每一边与其他边距属性分开设置的简写：margin-top、margin-right、margin-bottom 和 margin-left。

Float:

float CSS 属性指定一个元素应该从正常流中取出并放置在其容器的左侧或右侧，文本和内联元素将环绕它。

SEE RESULT

【讨论】：

OP 明确提到不要使用浮点数！

@Praveen Kumar：OP 想知道right-align an element by setting margin-left 是不是一种正确的技术？所以我区分了这两种技术并得出了一个结果。

【参考方案3】：

边距使您的内容在您的内容流中保持完整，但浮动使您的内容分层，因此内容可能会跟随在其下方；在此 Position Relative / Absolute 之上，它比浮动元素更多地分层，即它将您的标签从内容流中取出，并根据 z-index 和位置 L T R B 值进行调整（默认情况下：左上）。当您通过 Margin 调整对齐方式时，不同的浏览器会做出不同的反应，因为它实际上会影响您的内容流，但保留 Parent Element Float 选项对我来说效果很好，这完全取决于要求。