微信小程序将数据显示框、按钮、输入框放在一列上面

微信小程序需要摆放按钮与显示框、输入框，很乱。可以通过下面方式做成一行一行的模块

创建wxml代码

<view class="biaogekuang">
  <view class="zicaidan">量程：</view> 
    <view class="hang">温度量程：<view class="shuju">{{TempOutRge}}</view> 
        <button id="17" class="btn" type="primary" size="mini" bindtap="ReadBtnClick">读取</button>
        <input id="17" class="input" placeholder="请输入" bindinput="valueInput" type="digit"/>
        <button id="17" class="btn" type="primary" size="mini" bindtap="WriteBtnClick">设置</button>
    </view>
    <text decode>&nbsp;</text>

    <view class="hang">压力量程：<view class="shuju">{{DptUpLmt}}</view> 
        <button id="7" class="btn" type="primary" size="mini" bindtap="ReadBtnClick">读取</button>
        <input  id="7" class="input" placeholder="请输入" bindinput="valueInput" type="digit"/>
        <button id="7" class="btn" type="primary" size="mini" bindtap="WriteBtnClick">设置</button>
    </view>
    <text decode>&nbsp;</text>

    <view class="hang">湿度量程：<view class="shuju">{{FlowRange}}</view> 
        <button id="11" class="btn" type="primary" size="mini" bindtap="ReadBtnClick">读取</button>
        <input id="11" class="input" placeholder="请输入" bindinput="valueInput" type="digit"/>
        <button id="11" class="btn" type="primary" size="mini" bindtap="WriteBtnClick">设置</button>
    </view>
    <text decode>&nbsp;</text>
</view>

创建wxss代码

.biaogekuang{
  width: 100%;
  height: 100%;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
}
.zicaidan{
  text-align: center;
  width: 100%;
  font-size:  35rpx; 
}
.shuju{
  border: 1px solid #ccc;
  border-radius: 10rpx;
  width: 15%;
  height: 30px;
  min-height: 30px;
  padding-left: 10rpx;
}
.hang{
  display: flex;
}

.flex-wrp{
  width: 100%;
}
.input{
  border-radius: 10rpx;
  width: 15%;
  border: 1px solid #ccc;
  border-radius: 10rpx;
  height: 30px;
  min-height: 30px;
  padding-left: 10rpx;
}