IT俱乐部 CSS CSS 实现块级元素靠右的方法

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

HTML 如下:

想要块级元素居右往往设置 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 实现块级元素靠右的方法的文章就介绍到这了,更多相关css块级元素内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章,希望大家以后多多支持IT俱乐部!

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/css/13958.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部