CSS：我可以通过margin: 0 0 0 auto将一个元素右对齐吗？

Question

我可以通过设置margin-left来将元素右对齐吗？

margin: 0 0 0 auto;

但不包括浮点数

float: right;

我不确定这是否正确，但它可以在Chrome和Safari中使用。

========

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

Praveen Kumar提供了有用的信息： 您可以尝试，但支持有限。只有Chrome和Safari支持此功能。我猜Firefox也不支持。如果您只针对Chrome浏览器，则可以使用。所有基于-webkit-的浏览器都支持此功能，但其他浏览器不支持。选择权在您手中。 :)

- Mr. Míng

---

为什么你要那样做？ - zenkaty

在那个 div 中设置 right:0。 - Arpit Srivastava

你也可以使用padding-right:0。 - Arpit Srivastava

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

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

由于单词“may”和短语“right-align an element”，您的问题不太清楚。您能否详细说明一下？ - Jeroen

Answer 1

可以通过设置margin-left:auto来实现将元素右对齐。

但是请看下面margin和float的效果差异:

Margin

margin CSS属性为四个方向设置外边距。 它是一个简写，避免使用其他外边距属性单独设置每个方向：margin-top，margin-right，margin-bottom和margin-left。

Float:

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

查看结果

- Ahsan Khurshid

---

OP明确提到不要使用float！ - Praveen Kumar Purushothaman

@Praveen Kumar：原帖想知道通过设置margin-left右对齐元素是否是一种正确的技术？因此，我用一个结果区分了这两种技术。 - Ahsan Khurshid

Answer 2

解决方案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>

​ Fiddle: http://jsfiddle.net/U3JXk/2/
Fiddle: http://jsfiddle.net/U3JXk/3/ (带边框)

- Praveen Kumar Purushothaman

---

这仍然会将元素从页面流中移除，我想OP想要避免这种情况。 - zenkaty

也许可以试一下，等待楼主的回复 :) - Praveen Kumar Purushothaman

谢谢，但我想知道：我可以通过margin: 0 0 0 auto将元素右对齐吗？为什么？ - Míng

你可以这样做，但是支持有限。它只在Chrome和Safari中有效，甚至在Firefox中也不行，我猜测。如果你只想针对Chrome浏览器，那么是可以的。所有基于-webkit-的浏览器都支持此功能，但其他浏览器则不支持。选择权在你手中。 :) - Praveen Kumar Purushothaman

@Praveen Kumar，你是对的，在Firefox中不起作用。谢谢！ - Míng

Answer 3

Margin可以在内容流中保持您的内容完整，但Float会将您的内容层叠起来，因此有可能会出现内容跟随其下方的情况；相对/绝对定位比浮动元素更加层叠，即它将您的标签从内容流中取出，并根据z-index和位置L T R B值进行调整（默认为：左上）。当您通过Margin调整对齐方式时，不同的浏览器会有不同的反应，因为它实际上会影响您的内容流，但是对于我来说，保持父元素Float选项效果很好，这完全取决于需求。

- Vipul Pawsakar