Question

我可以通过设置margin-left

来右对齐元素

margin: 0 0 0 auto;

但不是浮动

float: right;

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

======

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

通过Praveen Kumar，这也很有帮助：你可以，但支持有限。它仅适用于Chrome和Safari。我想，甚至在Firefox中都没有。如果您打算仅定位Chrome浏览器，请参阅，是的，您可以。所有基于-webkit的浏览器都支持这一点，但不支持其他浏览器。选择是你的。 :)

Answer 1

是的，您可以通过设置margin-left:auto

右对齐元素

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

Margin

margin CSS属性设置所有四边的边距。这是一种速记，可以避免将每一边与其他边距属性分开设置：margin-top，margin-right，margin-bottom和margin-left。

Float：

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

SEE RESULT

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>

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

Answer 3

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

CSS：我可以通过保证金右对齐元素：0 0 0自动？

3 个答案:

解决方案1：使用定位

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