最近在做小程序,已经设置了宽高,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;
}
修改后:
 
 

小程序中input设置宽度后宽度还有空间,但是placeholder被遮挡问题的更多相关文章

  1. 小程序中,设置Sticky定位,距离上面会有一个缝隙

    近日,在小程序中使用sticky定位实现吸顶效果,不料入了一个大坑. 定位后,距离有position: relative:的上级元素有个1px大小的缝隙条,透过缝隙,滑动时可看到定位标题下的内容. 此 ...

  2. 微信小程序中input标签高度设置

    如果没有设置高度所以显示的是控件自身的高度. 微信小程序input控件原始设置: 上图发现: 我只覆盖了官方input的height,而没有覆盖min-height; .query input{ bo ...

  3. 小程序中在设置了textarea后三个祖级内事件失效

    在一次写小程序项目中收货地址中的详细地址时,我用的是文本域,下边的三个bindtap事件却不能使用了:下图: 报错信息如下图: 通过一番查找以及尝试之后,我发现是因为textarea标签的问题,但是依 ...

  4. 直击根源:微信小程序中web-view再次刷新后页面需要退两次

    背景 在上一章(直击根源:vue项目微信小程序页面跳转web-view不刷新)解决了vue在小程序回退不刷新的问题之后,会引出了一个刷新的页面需要点击返回两次才能返回上一个页面 问题描述 在A页面从B ...

  5. 微信小程序中 input组件影响页面样式的问题

    input组件有个默认的宽高,好像是不能清除的,在使用flex布局的时候,发现会影响到页面的布局,以为是flex布局的问题,改为float布局试了下也是同样的问题,试着把input标签换成别的标签,问 ...

  6. 微信小程序中使用阿里字体图标

    在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...

  7. 小程序中监听textarea或者input输入的值动态改变data中数组的对象的值

    Page({ data: { todoLists:[ { detail:"", date:"", location:"", priority ...

  8. 微信小程序中的tabBar设置

    我们先来看一份图,这个设置在官方文档中已经写得很清楚了,我只是做一个总结 注:我写注释是为了方便说明,在小程序中的json文件中是不能用注释的 这个tabBar属于全局属性,因此就在全局配置文件app ...

  9. 【小程序】小程序中设置 tabBar

    小程序中 tabBar 的设置,tabBar 就是底部导航栏,在app.json中配置. list 为数组至少两项.tab栏的 position 为 top 时间,不显示图标. "tabBa ...

随机推荐

  1. 如何在 Apache 里修改 PHP 配置

    当使用 PHP 作为 Apache 模块时,也可以使用 Apache 配置文件(例如:httpd.conf) 和 .htaccess 文件中的指令来修改 PHP 的配置 设定,不过需要有 " ...

  2. 原生JS实现轮播效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 做数据挖掘,就算发 20 几分的 CNS 子刊,也是垃圾!?--转载

    关于数据挖掘发表文章,我们知道很多人是看不上.瞧不起.嗤之以鼻的.大抵是因为这些人平时只发 CNS 主刊,所以才认为通过数据挖掘这种用「别人的数据」或者叫「干实验」来发文章是“「垃圾」,没有什么价值. ...

  4. .NET、C#和ASP.NET、ASP.NET MVC四者之间的区别

    什么是.NET? .NET是微软公司下的一个开发平台,.NET核心就是.NET Framwork(.NET框架)是.NET程序开发和运行的环境,在这个平台下可以用不同的语言进行开发,因为.NET是跨语 ...

  5. 为wordpress后台登陆添加算术验证码

    对于新建站(个人博客-柠檬https://ninmong.com)的站长来说提高后台的安全性,是一件非常重要的事,添加验证可以起到很好的效果,废话少说,贴代码 //后台登陆数学验证码 function ...

  6. vlog.hpp

    //vov #ifndef VLOG_HPP #define VLOG_HPP #include <sys/time.h> #include <unistd.h> #ifnde ...

  7. dvi接口介绍

    Most graphics cards and motherboards feature a Digital Video Interface (DVI) connector for connectin ...

  8. Django 应用程序 + 模型 + 基本数据访问

    如果你只是建造一个简单的web站点,那么可能你只需要一个app就可以了.如果是复杂的象 电子商务之类的Web站点,你可能需要把这些功能划分成不同的app,以便以后重用. 确实,你还可以不用创建app, ...

  9. 【Mac】系统语言切换为英文后chrome浏览器无法用国内印象笔记账号登陆印象笔记剪藏

    解决办法: 将chrome浏览器语言设置成中文就可以了

  10. linux mkdir命令

    1 mkdir,创建一个空目录. 比如:mkdir test 2 mkdir -p,递归创建目录. 比如:mkdir -p a/b.迭代创建. 3 mkdir -m 777 d 创建权限为777的目录 ...