经验|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, 那么容器中的弹性元素会从右开始排列.

经验|CSS 实现块级元素靠右的方法都看到这里了，搬砖不易，给小编点个赞呗，以后我会更有动力分享哦~