网页中怎么实现checkbox&radio对齐的教程

不仅不同浏览器不同,不同的字体,不同的文字大小也会表现不一样。

重置 form checkbox & radio

因为不同浏览器解析不一样,有些是默认margin,有些是默认padding,还有ie6,7连margin和padding即使设置为0后,所占的空间还是比较大,所以还是有必须重置下,这样就能解决很多不必要的麻烦。

以下是 14px Arial 字体的解决方案:

1、css代码

.form {font:14px/18pxArial,Helvetica,sans-serif; }

.form input, .form label {vertical-align:middle; }

.form label {margin-right:6px; }

.form_checkbox, .form_radio {

    margin:03px00;/*与右侧文字的间距*/

    padding:0;

    width:13px;

    height:13px;

    /*ie7 ie6 根据不同的 font-size 设置不同的值*/

    *vertical-align:1px;

}

2、html代码

<formname="form1"method="post"action=""class="form">

  <p>

    <inputtype="checkbox"name="checkbox4"id="checkbox4"class="form_checkbox">

    <labelfor="checkbox4">checkbox4</label>

    <inputtype="checkbox"name="checkbox5"id="checkbox5"class="form_checkbox">

    <labelfor="checkbox5">checkbox5</label>

    <inputtype="checkbox"name="checkbox6"id="checkbox6"class="form_checkbox">

    <labelfor="checkbox6">checkbox6</label>

  </p>

  <p>

    <inputtype="radio"name="radio"id="radio4"value="radio4"class="form_radio">

    <labelfor="radio4">radio4</label>

    <inputtype="radio"name="radio"id="radio5"value="radio5"class="form_radio">

    <labelfor="radio5">radio5</label>

    <inputtype="radio"name="radio"id="radio6"value="radio6"class="form_radio">

    <labelfor="radio6">radio6</label>

  </p>

</form>

3、效果图

时间: 2024-10-10 17:14:12

网页中怎么实现checkbox&radio对齐的教程的相关文章

网页中嵌入Flash的方法讨论_Flash教程

Flash 嵌入的问题论坛中有人问了好多次,到底应该怎么用,为什么通不过验证,要通过验证怎么办等等等.讨论中也出现了不少的误解,所以我单开一个帖总结一下我所知道的东西,不想看我罗嗦的直接跳到最后看结论就可以了. 一.传统的方法 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"    codebase="http://fpdownload.macromedia.com/pub/shockwave/ca

网页中的丝带和标牌设计英文教程

潮流会静静地诞生于我们未留意之时.当你浏览众多网站时,通常会看见自己在别处错过的花纹.图案.其中就包括丝带和标牌. 这两种图案越来越流行,文中将它们放在一起讨论,因为它们大都同时使用,丝带不言而喻,大家都清楚这个元素.但标牌--我的意思是它是放在屏幕上方 的人造标记,看起来就像t恤衫上的商标.使用这两种元素的网站确实质量上乘.这次展示的案例都非常华美.极少有潮流像这样:筛掉许许多多无趣的例子才找到 一个有吸引力的个案. 为什么使用丝带和标牌 标牌非常有用,因为它能有效吸引用户注意力.标牌将内容摆

纯JS打造网页中checkbox和radio的美化效果_javascript技巧

图片素材: 效果图: <head> <style> BODY { FONT-FAMILY: "Segoe UI", Frutiger, Tahoma, Helvetica, "Helvetica Neue", Arial, sans-serif; FONT-SIZE:62.5% } LABEL { MARGIN-RIGHT: 1.2em } .custom-checkbox { POSITION: relative } .custom-rad

如何在VS.NET/C# Builder开发的网页中也能实现DOS下录入数据回车换行的功能

数据|网页 如何在VS.NET/C# Builder开发的网页中也能实现DOS下录入数据回车换行的功能北京煤炭科学研究总院经济与信息研究所 丁报圣 在DOS年代,录入数据时我们习惯了在录入完一行数据后敲一个回车转入下一行的数据录入.昔日DOS的辉煌已经成为过去,如今更加友好易用的GUI图形操作界面Windows已经进入了我们的日常生活. 1996年Windows95的出现是软件史上的一次伟大革命.Windows 是美国微软公司开发的一种图形方式的操作系统,它的出现克服了 DOS 中难记的一些命令

入门:在网页中使用CSS样式表的四种方法

css|网页|样式表 如何在网页中插入CSS 前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内部样式表.导入外表样式表和内嵌样式. 1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用< link >标记链接到这个样式表文件,这个标记必须放到页面的< head >区内,如下: <head> -- <link

CSS基础:如何在网页中插入CSS

css|插入|网页 如何在网页中插入CSS 前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内部样式表.导入外表样式表和内嵌样式. 1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head>区内,如下:<head>--<

详解用Dreamweaver制作网页中的表格

dreamweaver|网页|详解 表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.虽然现在都提倡WEB标准建立网站,但是有时在网页中还是会应用到表格的. 这个教程我们给大家讲解表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实

网页设计技巧:设计颜色尺寸对齐方式对比

原文链接:http://webdesignledger.com/tips/the-principle-of-contrast-in-web-design 译者:猪小凡 网页设计是由很多个不同的元素构成的,而这些元素的重要性都不同,并且有些元素还需要尤为的突出.有些元素彼此之间存在着联系,而另外的元素之间则一点关联性都没有.比较难办的部分就是如何有效的在视觉上来传递元素之间的关系.这就该用到对比原则了. 对比就是两个或更多个元素之间的不同.通过对比,设计师就可以创造出视觉趣味性,同时引导用户的注意

用Dreamweaver制作网页中的表格详解

表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.虽然现在都提倡WEB标准建立网站,但是有时在网页中还是会应用到表格的. 这个教程我们给大家讲解表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实例 这幅页面的排版格式,如果用以前我