最近一直忙于工作,修改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>
类似表单还在整理一套规范,希望大家提宝贵建议 ~
分享到:
相关推荐
网页中form表单的元素会出现一些问题:比如文本域和按钮对齐问题,这个问题会影响到界面的美观度,本文将介绍如何解决此类问题,需要了解的朋友可以参考下
在很多网站涉及到表单的页面中,都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。
为了使表单元素和文字都垂直居中对齐,当文本框和下拉框都没问题,但是单选框和复选框就了,经过反复测试终于完整搞定与大家分享,感兴趣的各位可不要错过了哈
在很多网站涉及到表单的页面中,都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。
在很多网站涉及到表单的页面中,都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。首先,搜索到了wheatlee前辈的文章《大家都对vertical-align的各说各话》。wheatlee在他的文章中关于垂直...
之前一直困扰自己的一个问题就是表单内radio、select等的对齐问题,搞得自己相当恼.今天终于花了些时间找到了好的解决方法.也希望能够帮到跟我同样闻form色变的人
表单元素input、文字完美垂直居中对齐方法.
隐藏表单的元素 列表框 文本区域 表格 基本语法 跨多行、多列的表元 尺寸设置 文字的对齐/布局 在页面中的对齐/布局 标题 表格进阶 色彩 分组显示 边框 分隔线 多窗口页面 基本...
主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //... //msgTarget :'errorMsg' //在errorMsg元素内显示提示信息 },
Bootstrap提供了三种表单布局:垂直...内联表单中所有元素都向左对齐,标签并排,要创建内联表单,需要在form标签中加入class.form-inline 水平表单:和其它两种表单有所不同,要创建水平表单需要遵循以下步骤. •向父
注意: 表单元素最常用的是input 在input框选中时显示的样式 2.css的元素显示模式 html元素一般分为块元素和行内元素 (1)块级元素 div p h1-h6 ul ol li ①独占一行 ②宽度 高度 外边距 内边距都可控制 ③...
这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方式选项(这将在组件对齐方式部分进行详细讲解)来决定导航栏中的内容放置在哪里。 下面的实例演示了这点: <!DOCTYPE html> <html> &...
10.8 为表单添加结构(fieldset元素和legend元素) 10.9 将焦点移到某个元素上 10.9.1 使用【tab】键导航 10.9.2 使用热键导航 10.10 设置禁用控件和设置只读控件 10.10.1 设置禁止控件 10.10.2 设置只读控件 10.11 ...