错误的位置:
如果给"错误时间"的wxss加上了float:right;就会导致下面全部乱掉,如图:
仔细写了注释,属实小白一只,请教下各位师傅,谢谢。
<view class="container">
<!-- banner -->
<image class="errorbg" src="/images/bg4.jpg"></image>
<view class="login-from">
<!--时间-->
<view class="inputView">
<image class="timeImage" src="/images/时间.png"></image>
<label class="inputLab">错误时间:</label>
<picker mode="date" value="{{date}}" start="2020-03-01" end="2025-09-01" bindchange="bindDateChange">
<input class="inputTextDate" placeholder="点击选择日期" maxlength='10' value="{{date}}" />
</picker>
</view>
<!--路线-->
<view class="inputView">
<image class="routeImage" src="/images/路线.png"></image>
<label class="inputLab">跑步路线:</label>
<input class="inputText" placeholder="例如:ABABA" maxlength='10' bindinput="routeInput" />
</view>
<!--手机号-->
<view class="inputView">
<image class="phoneImage" src="/images/手机.png"></image>
<label class="inputLab">手机号码:</label>
<input class="inputText" placeholder="例如:18966404151" maxlength='11' bindinput="phoneInput" />
</view>
<!--备注-->
<view class="inputView">
<image class="remakesImage" src="/images/备注.png"></image>
<label class="inputLab">备注信息:</label>
<input class="inputText" placeholder="此项选填" maxlength='20' bindinput="remakesInput" />
</view>
<!--按钮-->
<view class="submitBtnView">
<button class="submitBtn" type="primary" bindtap="submit">上报</button>
</view>
</view>
</view>
/* pages/submit/submit.wxss */
.container {
height: 100%;
display: flex;
flex-direction: column;
padding: 0;
box-sizing: border-box;
}
/* banner */
.errorbg{
height: 120px;
}
/*表单内容*/
.login-from {
margin-top: 1px;
flex: auto;
height:100%;
}
.inputView {
/* background-color: #fff; */
margin-top: 20px;
line-height: 50px;
border-radius:30px;
border:1px solid #999999;
}
/*输入框前小图片*/
.timeImage, .routeImage,.phoneImage,.remakesImage {
margin-left: 22px;
width: 18px;
height: 16px
}
.inputLab {
margin: 15px 15px 15px 10px;
color: #545454;
font-size: 14px
}
.inputTextDate{
color: #cccccc;
flex: block;
float: right;
margin-right: 10px;
font-size: 13px
}
.inputText {
float: right;
text-align: left;
margin-right: 10px;
margin-top: 15px;
color: #cccccc;
font-size: 13px
}
/*按钮*/
.submitBtnView {
width: 100%;
height: auto;
/* background-color:#DCDCDC; */
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
}
.submitBtn {
width: 90%;
margin-top: 20px;
border-radius:10px;
}
用flex,别用float
自己顶一下