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. 实现Action类

    实现Action类 1.Action类的作用: (1)封装HTTP的请求参数: (2)处理用户请求: (3)封装处理结果. 2.Action类是什么,在Action类中应该包含什么: Action类就 ...

  2. join(添加字符)与id显示

    #!/usr/bin/env python li = ["alex",'sb'] l1 = "_".join(li) print(l1) print(id(li ...

  3. c#调用cmd的ping命令

    private static string CmdPing(string strIp) { Process p = new Process(); p.StartInfo.FileName = &quo ...

  4. ZOJ 1015 Fishing Net(判断弦图)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=15 题意:给定一个图.判断是不是弦图? 思路:(1)神马是弦图?对于一 ...

  5. VMware ESXI5.0的安装配置 zz

    http://www.hotxf.com/thread-297-1-1.html 1,    Vmware ESXI 光盘一张文件大小290M,本教程是以 5.0为案例. 2,    所需要安装的操作 ...

  6. CSS3教程链接

    下面列出本站关于CSS3的相关链接,以方便大家阅读: 第一节:<CSS3 Gradient> 第二节:<CSS3 RGBA> 第三节:<CSS3 Border-radiu ...

  7. 服务器端验证--验证框架验证required.

    struts2表单验证里field-validator type值一共可以取哪些?都什么含义? int 整数:double 实数:date 日期:expression 两数的关系比较: email E ...

  8. Linux配置apache等系列

    1.Linux下安装.配置PHP环境 2.ubuntu12.0.4安装apache, php ,mysql 3   CentOs中mysql的安装与配置

  9. iOS - Swift NSTimeZone 时区

    前言 public class NSTimeZone : NSObject, NSCopying, NSSecureCoding NSTimeZone 表示时区信息. 1.NSTimeZone 时区的 ...

  10. SAP供应商和客户的创建

    进来遇到一个创建供应商的需求,由于在系统中关于供应商和客户的创建比较特殊,且没有相关函数进行创建, 找到一个类和方法来创建,类名:VMD_EI_API  方法名:MAINTAIN_DIRECT_INP ...