<style type="text/css">

    body{

        padding: 10px;

    }

    input,textarea{

        width: 100%;

    }

</style>

<body>

    <input type="text" name="" id="" value="" />

    <textarea rows="5" cols="50">....</textarea>

    <input type="submit" name="" id="" value="提交" />

</body>

运行结果如图：

解决方案：

样式表中添加css3的box-sizing属性

*{

    box-sizing: border-box;

  }

修改后运行结果如下：

问题2：input、textarea、submit 宽度设置为100%，但显示宽度不一致的更多相关文章

  1. div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...

  2. 前端面试题CSS-div宽度设置为100%，设置属性margin-left和margin-right时出现的问题

    前端面试题CSS-div宽度设置为100%,设置属性margin-left和margin-right时出现的问题 div格式如下 <div class="a"> < ...

  3. DIV宽度设置成100%，浏览器窗口缩小后，右边出现留白

    解决办法:给body添加min-width属性

  4. echarts在tab切换时容器宽度设置为100%，只展示100px

    在 mychart.setOption(option); 后面加上 mychart.resize(); 即可

  5. TD中INPUT的宽度设置

    最近在用C#做Web程序时,碰到一个问题: 将TextBox的asp控件放在Table中的TD里面时,不设置宽度,自动会将TD撑的很大. 查看运行后页面的源代码发现,其实TextBox控件最终在客户端 ...

  6. 设置输入域(input/textarea)中文本光标的位置

    以前记录了一篇 将光标定位于输入框最右侧的实现方式 ,实现光标定位在文本的最末.这种需求往往在修改现有的文本.有时可能还需要把光标定位在首位,或者中间某个位置,这就需要实现一个更通用的方法. 这个方法 ...

  7. input 设置 width:100% 和padding后宽度超出父节点

    input 设置 width:100% 和padding后宽度超出父节点 添加如下css即可: box-sizing: border-box; -webkit-box-sizing: border-b ...

  8. :input 匹配所有 input, textarea, select 和 button 元素

    描述: 查找所有的input元素,下面这些元素都会被匹配到. HTML 代码: <form> <input type="button" value="I ...

  9. input , textarea 边框问题

    一.去掉边框: 看看基本的HTML: 复制代码 代码如下: <div class="wrap"> <input type="text" cla ...

随机推荐

  1. webpack环境搭建

    环境搭建参考:Webpack+vue+element逐步搭建开发环境 webpack入门:http://www.jianshu.com/p/42e11515c10f ----------------- ...

  2. 抛出异常 exception

    throw raise raise Exception.CreateFmt(sFileWithNoExt, [FileName]);

  3. vue eslint 代码自动格式化

    vue-cli 代码风格为 JavaScript Standard Style 代码检查规范严格,一不小心就无法运行,使用eslint的autoFixOnSave可以在保存代码的时候自动格式化代码 V ...

  4. NetBeans 8以后版本无法连接git服务器

    因为目前的git服务器的密钥加密基本都是256位的,而NetBeans带的jre环境的加密限制在基本的128位加密,从而导致无法和git服务器通信 解决办法 下载Java Cryptography E ...

  5. 关于php MD5加密 与java MD5 加密结果不一致的问题

    针对PHP不是UTF-8编码导致的问题 public String md5(String txt) {              try{                   MessageDiges ...

  6. 【JEECG技术文档】JEECG平台对外接口JWT应用文档V3.7.2

    一. 接口方式 接口调用采用http协议,rest请求方式: 二. 接口安全 接口安全采用Json web token (JWT)机制,基于token的鉴权机制. 1. 机制说明 基于token的鉴权 ...

  7. 25_ajax请求_使用fetch

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js弹出div层,弹出层页面底部出现UL出现一条线问题

    整个弹出div层,列表满一页时:底部会出现一条横线 原因:ul固定写在页面中了 解决方法: 将ul代码与li列表一样写在js中,如下 var newhtml = '<ul class=" ...

  9. DataGrip 连接数据库查询出来的结果乱码的问题

    打开连接数据源选项 选择 Advanced----Charset  填入 GBK 应用即可 目前遇到的是连接 SYbase数据库

  10. 解决Mac上安装mysqlclient的错误

       要想使用python操作mysql,那么就需要安装python操作数据库的驱动,由于mysqldb不支持python3,我选择安装mysqlclient, 命令行输入:pip3 install  ...