<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. 火狐Firefox浏览器所有历史版本下载地址

    Mozilla Firefox 频繁的更新,导致许多好用的插件在更新后不能兼容,而且想换回低版本还不容易啊,官网上只看到最新版本和前一个版本的下载. 这里为大家提供了一个下载链接,是来自Mozilla ...

  2. ABAP-计算器-动态表达式

    data:lv_value type string. call function 'EVAL_FORMULA' exporting formula = '90 <= 90' program = ...

  3. Dictionary转为Model实例

    Dictionary<string, object> dic = new Dictionary<string, object>(); dic.Add(); dic.Add(&q ...

  4. 转: JQuery this和$(this)的区别及获取$(this)子元素对象的方法

    1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的  $()  这 ...

  5. Linux ftp软件安装、配置和启动

    ftp软件安装.配置和启动及相关问题的解决在测试环境使用过程中经常使用.本文以SuSE11sp1上vsftpd的安装过程进行介绍. 测试环境 SuSE11sp1 vsftp软件安装检查 1.rpm - ...

  6. 关于新版OPENWRT拔PPTP的619错或PPTPD无法连接问题笔记

    旧版的openwrt要安装kmod-ipt-nethelper这个包 对于新版,如3.18或4.xx内核的ROM,要安装kmod-nf-nathelper-extra这个包

  7. 如何遍历List对象

    for(String str : list) {//其内部实质上还是调用了迭代器遍历方式,这种循环方式还有其他限制,不建议使用. System.out.println(str); } .普通for循环 ...

  8. angularjs中安卓原生APP调用H5页面js函数，js写法应注意

    安卓原生app调用js方法,js方法应写在html下的script标签内,不能有任何function包裹,例如angular的controller层,这样APP也是获取不到的: 所以只有放在html中 ...

  9. ORA-01704: 字符串文字太长 oracle

    .net连接oracle时,当流从文件读出来更新数据库时,会报"ORA-01704: 字符串文字太长"这样的错误. 原因:sql语句拼接而成. 解决:采用参数方法传值. strin ...

  10. Win8系统本地连接显示为网络2

    Win8系统中,当改变了网络环境,本地连接就会被识别为网络2,网络3等: 如果在一个固定的网络环境中,需要修改此名称,可以打开注册表: [HKEY_LOCAL_MACHINE\SOFTWARE\Mic ...