最近在做小程序，已經設置了寬高，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;
}
修改后：
