html form width,HTML form input width
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
I have this code below which is a simple html form. What i'm trying to do is make all of the inputs have max widths inside the form-panel and look something like the image below.
I tried setting max-width for all the inputs inside the panel but it doesn't seem to be working. Any help would be greatly appreciated.
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 4px 20px;
height: 35px;
border: 1px solid black;
margin: 10px;
border-radius: 3px;
max-width: 100%;
}
.form-panel {
display: table;
background-color: #b7bcbe;
}
回答1:
You can use flex-box instead of table.
As you use display: table - the column will have the same width (there is no colspan option)
Use display: flex for each columns and set flex-grow: 1 so that all elements will grow up and fill the parent.
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 4px 20px;
height: 35px;
border: 1px solid black;
margin: 10px;
border-radius: 3px;
flex-grow: 1;
}
.form-row {
flex-direction: row;
display: flex;
}
.form-panel {
background-color: #b7bcbe;
}
回答2:
You have written common css for all input elements..write separate css for that particular input field and put important.
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 4px 20px;
height: 35px;
border: 1px solid black;
margin: 10px;
border-radius: 3px;
max-width: 100%;
}
.form-panel {
display: table;
background-color: #b7bcbe;
}
回答3:
just add this line:
.form-email input {width: calc(100% - 20px);}
^--------[margin-left + margin-right]
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 4px 20px;
height: 35px;
border: 1px solid black;
margin: 10px;
border-radius: 3px;
max-width: 100%;
}
.form-panel {
display: table;
background-color: #b7bcbe;
}
.form-email input {width: calc(100% - 20px);}
html form width,HTML form input width相关推荐
- ExtJs6解决添加和修改Form共用一个form的隐藏域的id的取消传值
问题重现:修改不会有问题,id会绑定之前的grid,有具体数字 添加有问题,因为id是空,传的是绑定值的话会显示"类名-1",从int类型变成了string类型,后台会出错 这是E ...
- canvas.width和canvas.style.width区别以及应用
今天讲的内容是canvas.width和canvas.style.width的区别,在没有做canvas项目之前,其实我是并没有深入了解过这两个属性的,最近在研究canvas项目的自适应问题,尤其是在 ...
- jQuery.width()和jQuery.css('width')的区别
目录 问题描述 调试 总结和补充 问题描述 使用jQuery修改一个div的宽度时,发现$($0).width('10rem')总是修改成不正确的值,然后使用$($0).css('width', '1 ...
- 报错src unsupport width stride 300,rgb888 width stride should be 16 aligned(已解决)
环境:Ubuntu 20 运行代码语言:python3 问题: 在使用opencv进行图像显示时,系统报错src unsupport width stride 300,rgb888 width str ...
- 微软BI 之SSIS 系列 - 平面文件格式的区别(Delimited,Fixed width,Ragged Right, Fixed width ...)...
开篇介绍 SSIS 中处理文件,一般在描述输出平面文件格式的时候通常会出现以下几种选项: Delimited - 默认输出列使用逗号分隔,也可以选择其它的诸如 | ,或者 Tab 等. Fixed W ...
- ajax form表单提交 input file中的文件
现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了解决这个问题我走了不少弯路: 1.用原生的 input f ...
- 表单标签form、label、input、textarea、select
表单的介绍 表单用于搜集不同类型的用户输入(用户输入的数据),然后可以把用户数据提交到web服务器 . 表单相关标签的使用 <form>标签 表示表单标签,定义整体的表单区域 <la ...
- form表单获取input对象浏览器区别
如果一个html页面有两个form表单,每个input框name相同ID不同,IE会认识name而识别ID,这时它只会取第一个form的input值,firefox识别正常! 2012=-07-23 ...
- 重置form表单中的input值
话不多说,直接上代码,看不懂的,你也可以私聊(这也看不懂,我也很惆怅啊) $(':input','#addMenuModal') //'#addMenuModal'为form表单id值 .not(': ...
最新文章
- [php]如何做到高并发优化
- error: '__gnu_cxx::_Lock_policy' has not been declared
- 2021-11-11Object类
- border-collapse:collapse;清除表格中单元格的空隙
- 你必须知道的 SmartSql
- 删除当前文件夹下特定名称文件
- Java try catch语句详解
- 【vue2.0进阶】vue-router10分钟快速入门
- c语言的四个函数,C语言学习之动态内存分配的四个函数
- Oracle mysql 语句_Oracle 数据库常用操作语句大全
- vuejs之v-if-ajax异步请求数据遇到的坑
- python元组是有序还是无序_python-03 元组和字典
- 《C++代码设计与重用》——2.7 转型
- python类方法在类外定义_第7.15节 Python中classmethod定义的类方法详解
- Java高铁的速度是火车的两倍_超级高铁最高速度是飞机速度的近两倍,如果研发成功,对中国房价涨跌和中国高铁的比较优势会有什么影响?...
- 提高芯片在线烧录稳定性的6个方法
- 如何实用gho文件安装操作系统
- DB2JAVIT RC 9505
- 云开发电商小程序实战教程-篇首语
- 1.Python下载与安装教程 For Windows