微信小程序margin-right、padding-right属性无效的解决方法汇总

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; 即可解决。