input的对齐问题

知更鸟
知更鸟
知更鸟
1498
文章
6903
评论
2013年9月2日16:06:57 评论 1.7K

1.INPUT和图片按钮对齐:

<form method="post" action="ccc.asp">
 <input type="text" name="title" onfocus="this.value=''" value="请输入单词">
 <input type=image src="https://ccc.cn/img/dict.gif" align="absmiddle">
</form>

   也可以在按钮的样式里面加入:vertical-align:middle;

2.INPUT和文字对齐

定义INPUT的样式,input {vertical-align:middle;},这样文字就会和INPUT框对齐。

3.以此类推,SELETE框等都如此

可以在全局CSS中定义:input,select{vertical-align:middle;} 省的后面麻烦。

4.去除链接的虚线框

a{

   blr:expression_r(this.onFocus=this.blur());  

   outline:none;  

}

a:focus{

   -moz-outline-style: none;  

}

5.图片定位

background-position


 

1.input文本框下移的方法:padding-top ,可以解决文本框向下移。

2.input文本框和button对齐可以给他们外面加table (例如,谷歌首页)

3.表单和文字对齐可以设置父容器的字体为Tahoma

4.select, input,label,button{ vertical-align:middle; }(可以写在页面的最上面和*一样,先规定好)

5.font-family:Arial,sans-serif,Tahoma; /*规定同一字体*/

font-size:12px; /*规定同一字体大小*/

height:25px; /*解决Safari和Chrome下的高度问题*/

line-height:15px; /*协调height,让文字居中*/

overflow:visible; /*只有设置这个属性IE下padding才能生效*/

padding:0 0.5em; /*chrome、ff默认值;调整其值,让IE和其他浏览器的一样*/

继续阅读
weinxin
关于本站
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
最佳 CSS 框架 Web前端

最佳 CSS 框架

在构建网站时,使用 CSS 框架是一个实时的节省,因为它为您提供了每个网页设计师和前端开发人员在制作网站时需要的工具。 CSS 框架是一个软件框架,它允许使用 HTML/CSS 进行更简单、更符合标准...
line-height安卓中不垂直居中 Web前端

line-height安卓中不垂直居中

设计响应式网页,PC端和移动端的样式兼容性,很让人挠头,最常见的就是文字垂直不居中,而且苹果手机和安卓手机下表现也不尽相同,往往苹果手机是垂直居中的,但在安卓机上字却靠上了,总是差那么一像素,应该是安...
jQuery幻灯片插件:OWL Carousel Web前端

jQuery幻灯片插件:OWL Carousel

Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,它具有以下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式...
js实时获取浏览器窗口大小 Web前端

js实时获取浏览器窗口大小

js实时获取浏览器窗口大小,我们可以使用addEventListener()方法来实现。该addEventListener()方法可以注册事件处理程序以侦听浏览器窗口resize事件,例如window...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: