input的对齐问题

Web前端评论2.8K阅读模式

1.INPUT和图片按钮对齐:

<form method="post" action="ccc.asp">
 <input type="text" name="title" onfocus="this.value=''" value="请输入单词">
 <input type=image src="http://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
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
匿名

发表评论

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

拖动滑块以完成验证