微信小程序-让某个元素靠右、靠左、或者处于父元素的任意约束位置

作者:Keysqiu
创建时间:2025-11-30 18:19:02 最后一次修改时间:2025-12-02 12:14:29
Categories: Tags:

口诀:父相对,子绝对,靠哪,哪里置为0

WXML:

<view class='task-box'>
 <view class='checkbutton'>参与讨论</view>
</view>

WXSS:

父元素

.task-box{
 
width: 690rpx;
 
height: 70rpx;
 
display: flex;
 
position: relative;/*父元素位置要设置为相对*/
 
}

子元素

靠右

.task-box .checkbotton{
 
position: absolute; /* 要约束所在位置的子元素的位置要设置成绝对 */
 
right: 0; /* 靠右调节 */
 
width: 120rpx;
 
height: 70rpx;
 
}

靠左

.task-box .checkbotton{
 
position: absolute;/*要约束所在位置的子元素的位置要设置成绝对*/
 
left: 0;/* 调节靠左 */
 
width: 120rpx;
 
height: 70rpx;
 
}

块元素居中

.task-box .checkbotton{
 
width: 120rpx;
 
height: 70rpx;
 
display: flex;
 
margin-left: auto;  /* 块元素居中 */
 
margin-right: auto; 
}