<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. Cache专用： SoftReference

    SoftReference的语义就是当内存不够用的时候,GC会回收SoftReference所引用的对象.所以,在memory sensitive的程序中将某些大型数据设置成SoftReference ...

  2. python-玉米（小米）商城作业

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

  3. dubbo 搭建以及使用笔记

    公司使用dubbo做为rpc框架,有必要简单学习一番(自己搭建),自己做下学习记录. dubbo认识: dubbo是分布式SOA(面向服务)架构的rpc服务治理框架.可兼容各种rpc,强势的地方主要还 ...

  4. Redis使用认证密码登录

    Redis默认配置是不需要密码认证的,也就是说只要连接的Redis服务器的host和port正确,就可以连接使用.这在安全性上会有一定的问题,所以需要启用Redis的认证密码,增加Redis服务器的安 ...

  5. 删除oracle数据库用户

    手工删除ORACLE数据库用户时常会出现会话进程仍在使用导致删除失败的情况.需要查询会话并将会话删除才能成功将数据库用户删除,比较不方便. 适用场景 自动删除oracle数据库用户 基本知识 orac ...

  6. LeetCode OJ 24. Swap Nodes in Pairs

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...

  7. 钩子函数mounted:

    1.钩子函数 钩子函数是Windows消息处理机制的一部分,通过设置“钩子”,应用程序可以在系统级对所有消息.事件进行过滤,访问在正常情况下无法访问的消息.钩子的本质是一段用以处理系统消息的程序,通过 ...

  8. IP/IGMP/UDP校验和算法

    校验和算法:IP.IGMP.UDP和TCP报文头部都有检验和字段,其算法都是一样的. IP.IGMP.UDP和TCP校验和的范围:仅报文头部长度. 在发送数据时,为了计算数据包的检验和.应该按如下步骤 ...

  9. 有关于分布式和SOA的理解

    我的理解分布式和SOA都差不多,类似功能独立分开.举个例子,做一辆车,按照传统模式,先生产车架,然后生产车轮..然后一辆车完成.现在分布式就是生产车架与生产车轮分离,所有的材料 就是最后一次组装的时候 ...

  10. 学JS的心路历程 -非同步执行

    JS是单线程的语言,也就是说同一时间只会执行一行程序,所以如果一段程序执行过久就会造成阻塞(blocking)的现象,必须等到它结束后才能执行下一段程序. 举个例子来说,如果我们今天要买便当,但是老板 ...