问题2：input、textarea、submit 宽度设置为100%，但显示宽度不一致
<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%，但显示宽度不一致的更多相关文章
- div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...
- 前端面试题CSS-div宽度设置为100%，设置属性margin-left和margin-right时出现的问题
前端面试题CSS-div宽度设置为100%,设置属性margin-left和margin-right时出现的问题 div格式如下 <div class="a"> < ...
- DIV宽度设置成100%，浏览器窗口缩小后，右边出现留白
解决办法:给body添加min-width属性
- echarts在tab切换时容器宽度设置为100%，只展示100px
在 mychart.setOption(option); 后面加上 mychart.resize(); 即可
- TD中INPUT的宽度设置
最近在用C#做Web程序时,碰到一个问题: 将TextBox的asp控件放在Table中的TD里面时,不设置宽度,自动会将TD撑的很大. 查看运行后页面的源代码发现,其实TextBox控件最终在客户端 ...
- 设置输入域(input/textarea)中文本光标的位置
以前记录了一篇 将光标定位于输入框最右侧的实现方式 ,实现光标定位在文本的最末.这种需求往往在修改现有的文本.有时可能还需要把光标定位在首位,或者中间某个位置,这就需要实现一个更通用的方法. 这个方法 ...
- input 设置 width:100% 和padding后宽度超出父节点
input 设置 width:100% 和padding后宽度超出父节点 添加如下css即可: box-sizing: border-box; -webkit-box-sizing: border-b ...
- :input 匹配所有 input, textarea, select 和 button 元素
描述: 查找所有的input元素,下面这些元素都会被匹配到. HTML 代码: <form> <input type="button" value="I ...
- input , textarea 边框问题
一.去掉边框: 看看基本的HTML: 复制代码 代码如下: <div class="wrap"> <input type="text" cla ...
随机推荐
- element el-upload组件获取文件名
组件的连接:http://element-cn.eleme.io/#/zh-CN/component/upload 需求:点x按钮,获取文件名传到后端服务,把文件从服务器删除 分析: 仔细看文档,会发 ...
- 小柒2012 / spring-boot-quartz
spring-boot-quartz 基于spring-boot+quartz的CRUD动态任务管理系统,适用于中小项目. 基于spring-boot 2.x +quartz 的CRUD任务管理系统: ...
- 03-body标签中相关标签-2
主要内容: 列表标签 <ul>.<ol>.<dl>表格标签 <table>表单标签 <form> 一.列表标签 列表标签分为三种. 无序列表 ...
- windows7 安装虚拟机,xsheel连接不上的问题,记录一下
安装了好久,一直连接不上...,原来是网络没开..重新安装设置就可以了!!!记录一下
- css：在容器内文字超过容器范围，显示一行加省略号或者两行加省略号
一.显示一行加省略号:各浏览器兼容 .box{ width: 100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } ...
- Go语言学习笔记（2）
数组 var a [2]string a[0] = "Hello" a[1] = "World" primes := [6]int{2, 3, 5, 7, 11 ...
- 利用官方的vue-cli脚手架来搭建Vue集成开发环境
在利用vue-cli脚手架搭建vue集成环境之前,我们需要先安装nodejs的环境.如果在cmd中输入node --version和npm --version出现如下的版本信息,就说明安装已经成功了. ...
- 如何进行SQL排序
order by 语法如下: SELECT "栏位名" FROM "表格名" [WHERE "条件"] ORDER BY "栏位名 ...
- week5 0.1 安装materializecss
用ATOM打开项目 App是什么呢?就是App.js 我们将不需要的删掉 用一下materialize(类似bootstrap的东西) 官网https://materializecss.com/ 想用 ...
- 22.executor service Flask
pip包管理器 没有npm那么强大 不支持 npm --save install 这样的方法 但是我们有别的方法 安装Flask 但是呢 我们不能把它存放在package .json 那就需要我们自己 ...