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

发布时间：2023-03-06 16:11:29 作者：enjoyjrc

想要块级元素居右往往设置 margin-right: 0 属性是行不通的，下面介绍五种方法，不同场景适用不同方法，感兴趣的朋友跟随小编一起看看吧

HTML 如下：

<div class="parent">
  <div class="block"></div>
</div>

想要块级元素居右往往设置 margin-right: 0 属性是行不通的

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

.block{
    margin-left: auto;
}

将 margin-left 设为 auto 后, 元素左边的 margin 会被尽可能的撑大, 所以自然就把元素挤到右边去了

.parent{
  position: relative;
}
.block{
  position: absolute;
  right: 0;
}

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

.block{
  float: right;
}

使用 float 浮动将元素浮动到右边.

.parent{
  text-align: right;
}
.block{
  display: inline-block;
}

将块设为行内元素,然后父元素使用 text-align: right; 是块到右边.

.parent{
  display: flex;
  justify-content: flex-end;
}

将父元素变为弹性容器, 然后将 justify-content 设为 flex-end, 那么容器中的弹性元素会从右开始排列.

到此这篇关于CSS 实现块级元素靠右的方法的文章就介绍到这了,更多相关css块级元素内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！

CSS块级元素与行级元素详解
这篇文章主要介绍了CSS块级元素与行级元素详解的相关资料,需要的朋友可以参考下
2016-07-01
浅谈CSS块级元素与行内元素(内联元素)的区别和联系
下面小编就为大家带来一篇浅谈CSS块级元素与行内元素(内联元素)的区别和联系。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-14
进一步理解CSS编程中的块级元素和行内元素
这篇文章主要介绍了CSS编程中的块级元素和行内元素,是CSS入门学习中的基础知识,需要的朋友可以参考下
2015-09-26
对于div,p等块级元素css如何实现自动换行
对于div,p等块级元素想必大家并不陌生吧，下面本文为以示例代码方式为大家介绍下使用css如何实现自动换行
2014-01-17

相关文章