right属性无效的解决的需求:
我们制作微信小程序时可能经常需要用到
margin-right
和padding-right
这两个属性,可是设置好了margin-right或padding-right之后发现并没有任何变化。之前遇到过,解决了又忘记了。所以我整理之后做一下记录。这里我分成有无父元素以及有无左元素四种情况进行讨论分析。
有父元素和左元素
示例原图:
示例原代码:
wxml
<view class="weui-cell__hd">
<view class="title"><text>标题A</text></view>
<view class="more">查看更多</view>
<image src="/image/nextone.png" class="arrow"></image>
</view>
<view style="text-align:center">
<image class="emoticon"></image>
</view>
wxss
.title{
font-weight: 600;
margin-left: 25rpx;
}
.weui-cell__hd{
display: flex;
flex-direction: row;
align-items: center;
height: 60rpx;
font-size: 32rpx;
}
.more{
color: gray;
font-size: 28rpx;
}
.arrow{
width: 35rpx;
height: 35rpx;
padding-right: 20rpx;
}
.emoticon{
height: 240rpx;
width: 720rpx;
border:1px solid gainsboro;
margin-top:5rpx;
}
需求:“查看更多”和箭头要置于右侧,“标题A”保留原位置。可以看到:即可arrow元素加上padding-right: 20rpx;
属性无任何效果。
解决:有左元素首选方法一:左元素加上属性flex:1;
即可
修改:
.title{
font-weight: 600;
margin-left: 25rpx;
flex: 1;
}
效果图:
有父元素无左元素
示例原图:
示例原代码:
.weui-cell__hd{
display: flex;
flex-direction: row;
align-items: center;
height: 60rpx;
font-size: 32rpx;
}
解决:有父元素无左元素首选方法二:父元素加上属性float: right;
即可
修改:
.weui-cell__hd{
display: flex;
flex-direction: row;
align-items: center;
height: 60rpx;
font-size: 32rpx;
float: right;
}
效果图:
无父元素有左元素
解决:只要有左元素,不管有无父元素,方法都是首选方法一:左元素加上属性flex:1;
无父元素无左元素
示例原图:
示例原代码:
.arrow{
width: 35rpx;
height: 35rpx;
margin-right: 20rpx;
}
解决:在arrow外加个<view>
组件使用方法二即可,或者转而设置left属性。注意:设置left属性时不要用px作单位,必须使用%或rpx或vw作为单位去设置。
修改:
.arrow{
width: 35rpx;
height: 35rpx;
margin-left: 95%;
}
效果图:
总结:
只要有左元素,左元素加上属性flex:1;
即可解决;
无左元素的情况下父元素加上属性float: right;
即可解决。