在wxml中，如果把ms-text的view改成text，flex-direction:row就起作用，但是三角靠右移动不了，就像图2一样，这是什么问题？怎么解决

wxml代码：

<view class="weui-cell">
      <view class="weui-cell_hd">工作性质</view>
      <picker class="weui-cell_bd" name="work" range='{{worknature}}' value="{{worknature[list1]}}" bindchange="onWorkEvent">
        <view class='ms-text'>{{worknature[list1]?worknature[list1]:"请选择"}}</view>
        <icon class="icon"></icon>
      </picker>  
    </view>

wxss代码：
.weui-cell{
  display:flex;
  flex-direction:row;
  align-items:center;
  margin-top:25rpx;
}
.weui-cell_hd{
  display:flex;
  flex-basis:160rpx;
  font-size:32rpx;
}
.weui-cell .weui-cell_bd{
  display:flex;
  flex:1;
  font-size:30rpx;
  justify-content:center;
  flex-direction:row;
  border-bottom:1px solid #cfcece;
}
.icon {
  display:flex;
  display:inline-block;
  border: 10rpx solid transparent;/*三角形边框*/
  border-top: 10rpx solid #666;/*上边框*/
  margin-left: 10rpx;/*左边距*/
  margin-top: 10rpx;/*右边距*/
  margin-right:20rpx;
}