代码1：

.inputView

{

width: 70%;

display: flex;

background-color: orangered;

flex-direction: row;

/* padding-left: 100rpx; */

margin-top: 20rpx;

}

.inputViewImage

{

width: 100rpx;

height: 100rpx;

/* border-radius: 50rpx; */

/* margin-left: 100rpx; */

background-color: white;

}

.inputViewInput

{

height: 100rpx;

font-size: 50rpx;

/* background-color: white; */

color: gray;

margin-left: 20rpx;

}

<view class="inputView">

<image class="inputViewImage" src="{{image1Name}}"/>

<input class="inputViewInput" value="{{chineseInputText}}" placeholder="请输入" placeholder-class="inputViewInputPlaceClass" bindinput="chineseInputChange"/>

</view>

<view class="inputView">

<image class="inputViewImage" src="{{image2Name}}"/>

<input class="inputViewInput" value="{{otherInputText}}" placeholder="请输入" placeholder-class="inputViewInputPlaceClass" bindinput="otherInputChange"/>

</view>

得到的结果为什么image的宽度被压缩了？

1.我知道影响的地方是 inputView里面设置了 width:70%，但是不明白为什么会出现这种情况

2.另外，如果我将inputView里面的width:70%去掉，换成 margin-left:100rpx,也会出现同样的image宽度被压缩的情况

我想实现的效果其实就是 让红旗往距离左边有一定距离的边距而已，应该怎么处理？