主页 M

小程序开发textlabel与input同一行显示

2020-02-29 网页编程网 网页编程网

同一行显示的目的是节约空间,常见在登录、密码框。

<view class="denglu">


   <view class="form-wrap">

       <view class="flex-wrap input-wrap">

           <text class="label">标题</text>

           <input class="account-info-input" name="assasa" />

       </view>

   </view>


   <view class="form-wrap">

       <view class="flex-wrap input-wrap">

           <text class="label">描述</text>

           <input class="account-info-input" name="pwd" />

       </view>

   </view>

   

   <button class='mysubmit' type="primary" form-type="submit">登陆</button>

</view>


.denglu{

height:100%;

width: 100%;

/*display:flex;

flex-direction:column;

align-items:center;

justify-content:space-between;

box-sizing:border-box;

*/

margin: 10px 5px;

}


.form-warp{

border-top: 1px soid gray;

}

.flex-wrap{

 display: flex;

 flex-direction: row;

}

.label{

   color:#999;

   width:4em;

}

.input-wrap{

   background:white;

   border-bottom:1px solid #eee;

   height:46px;

   line-height:46px;

   margin:5px 0;

}


.account-info-input{

   font-size:18px;

   line-height:100%;

   height:100%;

   width:100%;

}

阅读原文
阅读 10621
123 显示电脑版