博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
input submit标签的高度和宽度与input text的差异
阅读量:5095 次
发布时间:2019-06-13

本文共 652 字,大约阅读时间需要 2 分钟。

<input type="text"> 时设置input的高度和border,最后元素的高度和宽度包含了border的值。

<input type="submit">时同样设置了input的高度和border宽度值,但是最后input显示的高度值仅为input css代码设定的高度值。

如下所示:CSS中Input height设置为18px,border设置了1px,但是最后input显示高度为18px,与旁边的input  text高度没有对齐。

 

.rightarea .form .submit{width:50px;height: 18px;margin-top: 7px;border:1px solid gray;}

根据的css说明:

解决这个问题,可以运用box sizing。

在submit样式表中加入:box-sizing:content-box,最后的代码如下:

.rightarea .form .submit{
box-sizing: content-box;-moz-box-sizing: content-box;/* Firefox */-webkit-box-sizing: content-box;/* Safari */width:50px;height: 18px;margin-top: 7px;border:1px solid gray;}

转载于:https://www.cnblogs.com/is-jackwen/p/10926416.html

你可能感兴趣的文章
web服务器
查看>>
第一阶段冲刺06
查看>>
EOS生产区块:解析插件producer_plugin
查看>>
排球积分程序(三)——模型类的设计
查看>>
HDU 4635 Strongly connected
查看>>
格式化输出数字和时间
查看>>
页面中公用的全选按钮,单选按钮组件的编写
查看>>
java笔记--用ThreadLocal管理线程,Callable<V>接口实现有返回值的线程
查看>>
(旧笔记搬家)struts.xml中单独页面跳转的配置
查看>>
不定期周末福利:数据结构与算法学习书单
查看>>
strlen函数
查看>>
关于TFS2010使用常见问题
查看>>
URL编码与解码
查看>>
Eclipse 安装SVN插件
查看>>
阿里云服务器CentOS6.9安装Mysql
查看>>
剑指offer系列6:数值的整数次方
查看>>
js 过滤敏感词
查看>>
poj2752 Seek the Name, Seek the Fame
查看>>
软件开发和软件测试,我该如何选择?(蜗牛学院)
查看>>
基本封装方法
查看>>