CSS 实现块级元素靠右的方法
HTML 如下：
|
1
2
3
|
<div class="parent"> <div class="block"></div></div> |
想要块级元素居右往往设置 margin-right: 0 属性是行不通的
下面介绍五种方法，不同场景适用不同方法
使用 margin 属性
|
1
2
3
|
.block{ margin-left: auto;} |
将 margin-left 设为 auto 后, 元素左边的 margin 会被尽可能的撑大, 所以自然就把元素挤到右边去了
使用 position 属性
|
1
2
3
4
5
6
7
|
.parent{ position: relative;}.block{ position: absolute; right: 0;} |
使用 position 定位, 绝对能把元素放到右边去.
使用 float 属性
|
1
2
3
|
.block{ float: right;} |
使用 float 浮动将元素浮动到右边.
使用 text-align 属性
|
1
2
3
4
5
6
|
.parent{ text-align: right;}.block{ display: inline-block;} |
将块设为行内元素,然后父元素使用 text-align: right; 是块到右边.
使用 flex 属性
|
1
2
3
4
|
.parent{ display: flex; justify-content: flex-end;} |
将父元素变为弹性容器, 然后将 justify-content 设为 flex-end, 那么容器中的弹性元素会从右开始排列.
THE END
