`
sunshine_七颜
  • 浏览: 16794 次
  • 性别: Icon_minigender_2
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

表单元素对齐

    博客分类:
  • CSS
阅读更多

最近一直忙于工作,修改BUG,很少有时间上来总结一些东西,实在抱歉,对于时间的管理上自己还是得加强,没时间不能做为一种理由。

提高用户体验关键在于细节。

经常会发现一些表单元素与标签对不齐的现象,如下图片所示:

 

 

做为专业者不能视而不见的,其实两句代码就能将对齐解决:

body{font-family:Tahoma;}
input,label{vertical-align:middle;}

 其中font-family:Tahoma为关键点,当然你可以根据自已需要而更改,不需在BODY里控制font-family,可以定义一个class,运用到提示文字的容器里。

<form id="form1" name="form1" method="post" action="">
 <p>
  <input type="checkbox" name="checkbox" value="checkbox" />
  <label>选项一</label>
 </p>
 <p>
  <input type="checkbox" name="checkbox" value="checkbox" />
  <label>选项二</label>
 </p>
 <p>
  <input type="radio" name="radiobutton" value="radiobutton" />
  <label>选项一</label>
 </p>
 <p>
  <input type="radio" name="radiobutton" value="radiobutton" />
  <label>选项二</label>
 </p>
</form>

类似表单还在整理一套规范,希望大家提宝贵建议 ~

分享到:
评论

相关推荐

    CSS 文本域和按钮对齐不一致解决方案

    网页中form表单的元素会出现一些问题:比如文本域和按钮对齐问题,这个问题会影响到界面的美观度,本文将介绍如何解决此类问题,需要了解的朋友可以参考下

    表单元素与提示文字无法对齐的解决方法(input,checkbox文字对齐)

    在很多网站涉及到表单的页面中,都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。

    表单元素和文字垂直居中对齐问题解决整理

    为了使表单元素和文字都垂直居中对齐,当文本框和下拉框都没问题,但是单选框和复选框就了,经过反复测试终于完整搞定与大家分享,感兴趣的各位可不要错过了哈

    表单元素与提示文字无法对齐的问题

    在很多网站涉及到表单的页面中,都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。

    vertical-align 表单元素垂直对齐的解决方法

    在很多网站涉及到表单的页面中,都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。首先,搜索到了wheatlee前辈的文章《大家都对vertical-align的各说各话》。wheatlee在他的文章中关于垂直...

    表单元素radio select对齐与IE6下双边距问题解决方案

    之前一直困扰自己的一个问题就是表单内radio、select等的对齐问题,搞得自己相当恼.今天终于花了些时间找到了好的解决方法.也希望能够帮到跟我同样闻form色变的人

    表单checkbox和radio文字对齐的代码

    表单元素input、文字完美垂直居中对齐方法.

    HTML教程(图文并茂)

    隐藏表单的元素 列表框 文本区域 表格 基本语法 跨多行、多列的表元 尺寸设置 文字的对齐/布局 在页面中的对齐/布局 标题 表格进阶 色彩 分组显示 边框 分隔线 多窗口页面 基本...

    extjs4的Ext.frorm.Panel控件属性说明和表单控件说明

    主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //... //msgTarget :'errorMsg' //在errorMsg元素内显示提示信息 },

    Bootstrap表单布局样式源代码

    Bootstrap提供了三种表单布局:垂直...内联表单中所有元素都向左对齐,标签并排,要创建内联表单,需要在form标签中加入class.form-inline 水平表单:和其它两种表单有所不同,要创建水平表单需要遵循以下步骤. •向父

    Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt

    注意: 表单元素最常用的是input 在input框选中时显示的样式 2.css的元素显示模式 html元素一般分为块元素和行内元素 (1)块级元素 div p h1-h6 ul ol li ①独占一行 ②宽度 高度 外边距 内边距都可控制 ③...

    Bootstrap导航栏各元素操作方法(表单、按钮、文本)

    这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方式选项(这将在组件对齐方式部分进行详细讲解)来决定导航栏中的内容放置在哪里。 下面的实例演示了这点: &lt;!DOCTYPE html&gt; &lt;html&gt; &...

    HTML开发王

    10.8 为表单添加结构(fieldset元素和legend元素) 10.9 将焦点移到某个元素上 10.9.1 使用【tab】键导航 10.9.2 使用热键导航 10.10 设置禁用控件和设置只读控件 10.10.1 设置禁止控件 10.10.2 设置只读控件 10.11 ...

Global site tag (gtag.js) - Google Analytics