CSS 实现块级元素靠右的方法

2023-04-0416:08:30网页制作Comments1,045 views字数 628阅读模式

HTML 如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32859.html

1
2
3
<div class="parent">
  <div class="block"></div>
</div>

想要块级元素居右往往设置 margin-right: 0 属性是行不通的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32859.html

下面介绍五种方法,不同场景适用不同方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32859.html

使用 margin 属性

1
2
3
.block{
    margin-left: auto;
}

将 margin-left 设为 auto 后, 元素左边的 margin 会被尽可能的撑大, 所以自然就把元素挤到右边去了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32859.html

使用 position 属性

1
2
3
4
5
6
7
.parent{
  position: relative;
}
.block{
  position: absolute;
  right: 0;
}

使用 position 定位, 绝对能把元素放到右边去.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32859.html

使用 float 属性

1
2
3
.block{
  float: right;
}

使用 float 浮动将元素浮动到右边.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32859.html

使用 text-align 属性

1
2
3
4
5
6
.parent{
  text-align: right;
}
.block{
  display: inline-block;
}

将块设为行内元素,然后父元素使用 text-align: right; 是块到右边.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32859.html

使用 flex 属性

1
2
3
4
.parent{
  display: flex;
  justify-content: flex-end;
}

将父元素变为弹性容器, 然后将 justify-content 设为 flex-end, 那么容器中的弹性元素会从右开始排列.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32859.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/32859.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定