input submit标签的高度和宽度与input text的差异
<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;}
根据www.w3school.com.cn的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;}
input submit标签的高度和宽度与input text的差异的更多相关文章
- <iframe>标签自适应高度和宽度
<iframe src="index.html" id="iframepage" frameborder="0" scrolling= ...
- WordPress 去除图片img标签的高度与宽度
要求 如,在桌面设备上,图片使用的是以下的HTML代码: 代码如下 复制代码 1 <img src="abc.png" alt="abc" width ...
- iframe 标签自适应高度和宽度
iframe 结构如下 <iframe src="index.html" id="frame" frameborder="0" scr ...
- jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现
jQuery计算文本宽度的原理是利用html提供的<pre>标签,向dom中动态添加<pre>标签,标签里的内容就是要测试长度的文本,获取完长度之后再删除刚才添加的<pr ...
- html之input系列标签
input属性太多,我这里仅列出几个我喜欢的吧. disabled:首次加载时禁用此元素 checked:首次加载时选中此元素 form:输入字段所属的一个或多个表单 hieght:定义input字段 ...
- 转:CSS设置HTML元素的高度与宽度的各种情况总结
1.元素不设宽度第一种情况:元素为文档流中元素<!-- 父元素宽度为100px --><div style="width:100px;"> < ...
- CSS实现高度和宽度自适应
其实用绝对定位也可以实现高度和宽度的自适应,从而出现自适应大小的区域及滚动条. <%@ Page Language="C#" AutoEventWireup="tr ...
- HTML:Input元素标签的详细介绍
总结Input的标签: Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍.1,type=text输入类型是t ...
- 关于html中table表格tr,td的高度和宽度
关于html中table表格tr,td的高度和宽度 关于html中table表格tr,td的高度和宽度 做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题.首先,来分析 ...
随机推荐
- yield函数的执行顺序
例子: 上图中标明了 行号出现的顺序 从顺序中可以看到 1.开始先执行for循环,执行到93行yield_test(1)时,会调用函数yield_test(),所以打印了79行内容 2.到80行时, ...
- C#中的事件注册和注销
C#中的事件注册和注销 由于.NET框架对消息循环机制进行了很好的封装,开发人员不再需要深入的了解Windows事件/消息实现的具体机制,也无需创建复杂的事件结构体和所谓的消息句柄.我们所要做的无非就 ...
- 从0开始学习 GitHub 系列之「01.初识 GitHub
转载:http://blog.csdn.net/googdev/article/details/52787516 1. 写在前面 我一直认为 GitHub 是程序员必备技能,程序员应该没有不知道 Gi ...
- golang之下载安装配置
1.下载:根据操作系统和计算架构选择合适的安装包,操作系统类型有linux.mac.windows等,计算架构分为32位的386计算架构和64位的amd64计算架构 2.安装:推荐安装到 /usr/l ...
- qt绘制渐变区域
// 原理:通过点到线,然后叠加成区域.同理,可使用其他图形 QPainter painter(m_pWidget); QLinearGradient linearGradient(QPointF(, ...
- 仿Google Nexus菜单样式
在线演示 本地下载
- Java练习 SDUT-2271_Eddy的难题
Eddy的难题 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 人随着岁数的增长是越大越聪明还是越大越笨,这是一个值得全 ...
- retailMall-vuedemo1
//home.vue <template> <div class="home"> <div class="top-info"> ...
- “龙井”开箱评测 |Alibaba Dragonwell 新手上路指南
作者|阿里云智能事业群 高级技术专家 陆传胜 阿里巴巴有着最丰富的 Java 应用场景,覆盖电商,金融,物流等众多领域,是世界上最大的 Java 用户之一. 2019 年 3 月 21 日,阿里巴巴在 ...
- LeedCode OJ --- Binary Tree Inorder Traversal
点击打开题目链接 今天只是写了递归的版本,因为还没想好怎么用迭代来实现,可以写的过程中,有一点是有疑问的,虽然我的代码可以AC. 问题是:主调函数是可以使用子函数中返回的在子函数中定义的vector. ...