6

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

margin: 0 0 0 auto;

但不浮动

float: right;

?

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

========

AK的答案是我需要的；

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

4

3 回答 3

16

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

margin但请参阅下面的结果之间的区别float：

利润

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

浮动：

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

查看结果

于 2012-09-03T05:46:10.750 回答
4

解决方案 1：使用定位

如果不通过浮动，您可以使用定位。将父元素设为 as position: relative;，将元素设为position: absolute;with 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元素的属性更改为出现 asinline和使用text-alignas 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/（带边框）

于 2012-09-03T05:41:01.987 回答
0

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

于 2012-09-03T06:29:16.050 回答