CSS 系列 -- 块级元素靠右的实现方式

HTML 如下：

<div class="parent">
  <div class="block"></div>
</div>
复制代码

想要块级元素居右往往设置

margin-right: 0

属性是行不通的

下面介绍五种方法，不同场景适用不同方法

使用 margin 属性

.block{
    margin-left: auto;
}
复制代码

将

margin-left

设为

auto

后, 元素左边的

margin

会被尽可能的撑大, 所以自然就把元素挤到右边去了

使用 position 属性

.parent{
  position: relative;
}
.block{
  position: absolute;
  right: 0;
}
复制代码

使用

position

定位, 绝对能把元素放到右边去.

使用 float 属性

.block{
  float: right;
}
复制代码

使用

float

浮动将元素浮动到右边.

使用 text-align 属性

.parent{
  text-align: right;
}
.block{
  display: inline-block;
}
复制代码

将块设为行内元素,然后父元素使用

text-align: right;

是块到右边.

使用 flex 属性

.parent{
  display: flex;
  justify-content: flex-end;
}
复制代码

将父元素变为弹性容器, 然后将

justify-content

设为

flex-end

, 那么容器中的弹性元素会从右开始排列.

原文链接：https://juejin.cn/post/6985480302030225415