最近刚开始学习小程序,照书写了一段,但是开发工具预览和发布预览效果不一致,求教各位怎么调整CSS,源代码,开发工具预览效果和发布预览效果(在华为mate10pro上)。实机测试,“账号”,“密码”字体排版变成了竖直显示,应该怎么修改样式?
< view class = 'content' >
< view class = 'account' >
< view class = 'title' >账号</ view >
< view class = 'num' >< input bindinput = 'accountInput' placeholder = '用户名/邮箱/手机号' placeholder-style = 'color:#999999' ></ input ></ view >
</ view >
< view class = 'hr' ></ view >
< view class = 'account' >
< view class = 'title' >密码</ view >
< view class = 'num' >< input bindblur = 'pwdBlur' placeholder = '请输入密码' password = 'true' placeholder-style = 'color:#999999' ></ input ></ view >
< view class = 'see' >
< image src = '/images/see.jpg' style = 'width:42px;height:30px' ></ image >
</ view >
</ view >
< view class = 'hr' ></ view >
< button class = 'btn' disabled = '{{disabled}}' type = '{{btnstate}}' bindtap = 'login' >登录</ button >
< view class = 'operate' >
< view >< n‘a’vigator url = '../mobile/mobile' >手机快速注册</ n‘a’vigator ></ view >
< view >< n‘a’vigator url = '../company/company' >企业用户注册</ n‘a’vigator ></ view >
< view >找回密码</ view >
</ view >
< view class = 'login' >
< view >< image src = '/images/wxlogin.png' style = 'width:70px;height:98px' ></ image ></ view >
< view >< image src = '/images/qqlogin.png' style = 'width:70px;height:98px' ></ image ></ view >
</ view >
</ view >
|
.content{
margin-top : 40px ;
}
.account{
display : flex;
flex- direction : row;
padding-left : 20px ;
padding-top : 20px ;
padding-bottom : 10px ;
width : 90% ;
}
.title{
margin-right : 30px ;
font-weight : bold ;
}
.hr{
border : 1px solid #cccccc ;
opacity: 0.2 ;
width : 90% ;
margin : 0 auto ;
}
.see{
position : absolute ;
right : 20px ;
}
.btn{
width : 90% ;
margin-top : 40px ;
color : #999999 ;
}
.operate{
display : flex;
flex- direction : row;
}
.operate view{
margin : 0 auto ;
margin-top : 40px ;
font-size : 14px ;
color : #333333 ;
}
.login{
display : flex;
flex- direction : row;
margin-top : 140px ;
}
.login view{
margin : 0 auto ;
}
|
应该是宽度不够引起的,单位尽量用rpx
谢谢,后来在title也添加了width设置属性,就显示正常了