首页 前端知识 CSS 实现块级元素靠右的5种方法。

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

2024-06-19 08:06:03 前端知识 前端哥 439 940 我要收藏

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

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

到此这篇关于CSS 实现块级元素靠右的方法的文章就介绍到这了,希望可以对你有所帮助。

来源:微点阅读  https://www.weidianyuedu.com

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12828.html
标签
评论
发布的文章

Markdown基础与进阶语法

2024-06-30 22:06:12

零基础 HTML 入门(详细)

2024-06-30 22:06:09

CSS3基本语法

2024-06-30 22:06:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!