css系列--块级元素靠右的实现方式
将父元素变为弹性容器, 然后将 justify-content 设为 flex-end, 那么容器中的弹性元素会从右开始排列.想要块级元素居右往往设置 margin-right: 0 属性是行不通的此方案不可行!将块设为行内元素,然后父元素使用 text-align: right;实现某一行中内部元素,靠右展示。
·
问题描述:
实现某一行中内部元素,靠右展示
HTML 如下:
<div class="parent">
<div class="block"></div>
</div>
想要块级元素居右往往设置 margin-right: 0 属性是行不通的 此方案不可行!!
方法1:使用 margin 属性
.block{
margin-left: auto;
}
方法2:使用 position 属性
.parent{
position: relative;
}
.block{
position: absolute;
right: 0;
}
方法3:使用 float 属性
.block{
float: right;
}
方法4:使用 text-align 属性
.parent{
text-align: right;
}
.block{
display: inline-block;
}
将块设为行内元素,然后父元素使用 text-align: right; 是块到右边.
方法5:使用 flex 属性
.parent{
display: flex;
justify-content: flex-end;
}
将父元素变为弹性容器, 然后将 justify-content 设为 flex-end, 那么容器中的弹性元素会从右开始排列.
更多推荐
已为社区贡献1条内容
所有评论(0)