最近刚开始学习小程序，照书写了一段，但是开发工具预览和发布预览效果不一致，求教各位怎么调整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设置属性，就显示正常了