如何将文本输入框与文本不对齐,input对齐同一行文字
分类:网页设计 Tags: input css 评论:0 浏览:7817 最近更新时间:2008/10/18 22:35:17
在进行div+css网页布局的时候,不可避免的需要插入一定的表单元素,input是其中最常见的一种。我们在布局中,常会遇到文本输入框与同处一行的文本不对齐的问题。这个问题设置input的vertical-align:middle属性来解决。
我们来看下面的例子,如何解决文本输入框与文本对齐的问题!
在a中是未设置的样子。文本与文本框不能垂直对齐,很不美观。
在b中,设置了vertical-align:middle;解决了这一问题。文本与文本框垂直居中对齐。
我们来看下面的例子,如何解决文本输入框与文本对齐的问题!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>resday.com</title>
- <style type="text/css">
- <!--
- #a {}{
- height:30px;
- border:1px solid #ccc;
- }
- #b {}{
- margin-top:20px;
- height:30px;
- border:1px solid #ccc;
- }
- #a input {}{
- width:200px;
- height:30px;
- border:1px solid red;
- }
- #b input {}{
- width:200px;
- height:30px;
- border:1px solid red;
- vertical-align:middle;
- }
- -->
- </style>
- </head>
- <body>
- <div id="a"><input type="text" />yuzhiguo.com - Div+CSS布局常见问题</div>
- <div id="b"><input type="text" />yuzhiguo.com - Div+CSS布局常见问题</div>
- </body>
- </html>
在b中,设置了vertical-align:middle;解决了这一问题。文本与文本框垂直居中对齐。
本文地址:/381/
-
• 如何使网页支持PNG透明(IE6、IE7、firefox下测试通过)
• 英文网站/英文名片电话号码的正确写法
• wordpress更换域名后如何替换数据库老网址
• 几行代码搞定FLASH动态切换图片效果
• 网站备案收不到手机验证码?如何跳过ICP备案的手机验证码?
• 404错误页面也疯狂,看看15款有创意的404错误页面
• 有用的CSS教程:18步改变你网站的css,使你从初学者成为高级用户(图)
• 如何实现鼠标移在图片上出现渐现的效果
• 全面兼容谷歌、火狐、IE浏览器的漂浮广告代码
• js屏蔽右键,防止网页文字信息及图片被保存复制的代码