最近在做小程序，已经设置了宽高，placeholder没有超出input宽度，却被挡住了一部分，上代码看一下：
wxml:
<view class='container'>
<input class='phone' placeholder='请输入手机号' placeholder-class='placeholder'></input>
<view class='code_container'>
<input class='code' placeholder='请输入短信验证码' placeholder-class='placeholder'></input>
<view class='getcode'>获取验证码</view>
</view>
</view>
wxss:
.container{
padding: 270rpx 80rpx 0;
}
.phone,.code_container{
border-bottom: 2rpx solid #d3d3d3;
width: 100%;
height: 94rpx;
line-height: 94rpx;
margin-top: 26rpx;
}
.phone,.code{
font-size: 34rpx;
}
.placeholder{
color: #bcbcc2;
}
.code{
width: calc(100% - 168rpx);
height: 100%;
float: left;
}
.getcode{
border-left: 2rpx solid #d3d3d3;
width: 166rpx;
height: 40rpx;
line-height: 40rpx;
margin-top: 27rpx;
text-align: right;
float: right;
}
如图：
后来查询得知，可能是小程序的一个bug，具体原因还不得知，但是给input加一个父元素<view></view>标签，设置宽高，input的宽度设置为百分之百即可。
wxml:
<view class='container'>
<input class='phone' placeholder='请输入手机号' placeholder-class='placeholder'></input>
<view class='code_container'>
<view class='code_box'>
<input class='code' placeholder='请输入短信验证码' placeholder-class='placeholder'></input>
</view>
<view class='getcode'>获取验证码</view>
</view>
</view>
wxss:
.container{
padding: 270rpx 80rpx 0;
}
.phone,.code_container{
border-bottom: 2rpx solid #d3d3d3;
width: 100%;
height: 94rpx;
line-height: 94rpx;
margin-top: 26rpx;
}
.phone,.code{
font-size: 34rpx;
}
.placeholder{
color: #bcbcc2;
}
.code_box{
float: left;
width: calc(100% - 168rpx);
height: 100%;
}
.code{
width: 100%;
height: 100%;
}
.getcode{
border-left: 2rpx solid #d3d3d3;
width: 166rpx;
height: 40rpx;
line-height: 40rpx;
margin-top: 27rpx;
text-align: right;
float: right;
}
修改后：
