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. .Net操作注册表--un

    C#操作注册表 导入命名空间 Using MicroSoft.Win32;//64位系统装的64位版本

  2. BZOJ 3144 切糕（最小割）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=3144 题意: 思路:我们假设没有那个D的限制.这样就简 单了.贪心的话,我们只要在每一个 ...

  3. FZU 2144 Shooting Game

    Shooting Game Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submi ...

  4. Difference between Char.IsDigit() and Char.IsNumber() in C#

    http://stackoverflow.com/questions/228532/difference-between-char-isdigit-and-char-isnumber-in-c-sha ...

  5. wordpress中文标签无法访问的解决方法

    wordpress中文标签无法访问的解决方法  爱好  2年前 (2014-05-29)  7,601  8 当博客从华夏名网转移到阿里云之后,发现了不少问题,其中一个就是wordpress中文标签无 ...

  6. python_way ,day11 进程

    if __name__ == '__main__': for i in range(10): p = Process(target=foo, args=(i,)) # p.daemon = True ...

  7. myeclipse10.05安装aptana

    安装步骤: 1.下载aptana3.2 Eclipse Plugin插件. 下载地址:http://update1.aptana.org/studio/3.2/024747/index.html 2. ...

  8. HDU-4514 湫湫系列故事——设计风景线 手动扩栈

    题意:给定一个无向图,首先判定是否成环,然后求一条最长链. 分析:成环用并查集,最长链就是个最简单的树形dp了. #include <cstdlib> #include <cstri ...

  9. iOS进阶收藏

    XCode自带重构方式http://www.cocoachina.com/ios/20160127/15097.html iOS迭代多语言开发http://www.cocoachina.com/ios ...

  10. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...