css文本框与按钮不对齐解决方案:

文字要包含在label标签中,并设置行高,否则文字会与文本框的顶 端对齐;文本框要设置vertical-align:middle;否则文本框与button顶端对齐;button中文字垂直居中,要设置高和行高,行高要小于高。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#textfield{
border:1px solid #000;
height:16px;
}
#button{background:#FFF;
border:1px solid #000;
height:20px;
}
</style>
</head>
<body>
<form>
<input type="text" name="textfield" id="textfield" />
<input type="submit" name="button" id="button" value="提交"/>
</form>
</body>
</html>

 IE 的标准正常对齐,但在 Firefox 中文本域和按钮高度是错开的。

 

此时通过对 input 标记设定左浮动 (float:left),即可兼容 Firefox,CSS 代码如下:

button的高度包含边框的高度,而文本框text则不包含边框高度。

css归纳的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. css学习归纳总结(三) 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  3. css学习归纳总结(二) 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

  4. css学习归纳总结(一) 转

    原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...

  5. CSS IE6/7/8, Firefox, Safari, Chrome, Opera Hack使用简要归纳(转)

    网上有很多关于IE6/7/8, Firefox, Safari, Chrome, Opera CSS Hack的文章,但我觉得太过繁杂,要不给出一张看也看不懂的CSS Hack归纳表,要不就是给出一大 ...

  6. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

  7. css兼容问题与实践归纳总结

    css兼容问题与实践归纳总结 一.IE6/7 原生块元素与display:inline-block; <div style="display:inline-block;"&g ...

  8. css学习の第一四弹—代码格式简写归纳

    一.代码简写方式归纳 >>1.盒模型代码简写: 外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左 1.如果t ...

  9. 前端工程师面试问题归纳(一、问答类html/css/js基础)

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

随机推荐

  1. thinkphp model层外挪,以便多个站点可以通用

    /ThinkPHP/ThinkPHP.php  增加如下代码 //非原始代码defined('BASE_LOGIC') or define('BASE_LOGIC', THINK_PATH . '.. ...

  2. [HDOJ5289]Assignment(RMQ,二分)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5289 题意:求满足区间内最大值和最小值差为k的区间个数. 预处理出区间的最值,枚举左端点,根据最值的单 ...

  3. VBA中自定义类和事件的(伪)注册

    想了解一下VBA中自定义类和事件,以及注册事件处理程序的方法. 折腾了大半天,觉得这样的方式实在称不上“注册”,所以加一个“伪”字.纯粹是瞎试,原理也还没有摸透.先留着,有时间再接着摸. 做以下尝试: ...

  4. Cookie 总结

    设置Cookie //设置cookie Cookie cookie = new Cookie("TOM","111"); //设置有效期,默认秒为单位 cook ...

  5. ServiceStack.OrmLite 笔记5 改

    修改 db.Update(new Person { Id = 1, FirstName = "Jimi", LastName = "Hendrix", Age ...

  6. 系统分区MBR、GPT

    分区模式: ①MBR(主引导记录(Master Boot Record))分区:在驱动器最前端的一段引导扇区 缺点:主分区不超过4个,单个分区容量最大2TB 分区工具fdisk只能给硬盘做MBR分区, ...

  7. li下沉 margin-top越界 浮动带来的影响

    使用li嵌套实现的二级导航菜单,在IE浏览器下显示正常,而在谷歌及360极速模式下最后的几个li标签下沉了,其实在webkit内核的浏览器中都会有这种情况,如下图: 出现此种状况,有两种可能: 1.导 ...

  8. JavaScript删除-confirm

    一> onclick="javascript:if (confirm('您确定要删除吗?注意:此操作不可恢复,请谨慎操作!')){return true;} return false; ...

  9. Spring security3入门(转)

    http://kingxss.iteye.com/blog/1908011 补充类图: 注意:1.修改为链接mysql数据库:             2.代码地址:https://github.co ...

  10. hdu4720Naive and Silly Muggles

    链接 一直理解的最小覆盖圆就是外接圆..原来还要分钝角和锐角... 钝角的话就为最长边的中点,对于这题分别枚举一下外接圆以及中点的圆,判一下是不是在园外. #include <iostream& ...