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

2023-12-02 0 550

HTML 如下:

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

想要块级元素居右往往设置 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块级元素内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持悠久资源网!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 CSS CSS 实现块级元素靠右的方法 https://www.u-9.cn/sheji/css/28665.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务