收藏
回答

用了picker导致我排版很乱,请教下各位师傅这个wxss应该怎么弄?

错误的位置:

如果给"错误时间"的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;
}
回答关注问题邀请回答
收藏

2 个回答

  • 耿霄
    耿霄
    2020-03-30

    用flex,别用float

    2020-03-30
    有用 1
    回复 2
    • 小唐。
      小唐。
      2020-03-30
      谢谢师傅,我试试
      2020-03-30
      回复
    • 耿霄
      耿霄
      2020-03-31回复小唐。
      不客气,希望对你有帮助哈
      2020-03-31
      回复
  • 小唐。
    小唐。
    2020-03-30

    自己顶一下

    2020-03-30
    有用
    回复
登录 后发表内容
问题标签