余志国网站设计工作室是专业从事义乌网站建设、义乌外贸网站建设、义乌网站制作、义乌网站设计的专业义乌网站建设工作室，是义乌外贸网站建设专家！

如何将文本输入框与文本不对齐，input对齐同一行文字

分类：网页设计 Tags： input css 评论：0 浏览：6745 最近更新时间：2008/10/18 22:35:17

         在进行div+css网页布局的时候，不可避免的需要插入一定的表单元素，input是其中最常见的一种。我们在布局中，常会遇到文本输入框与同处一行的文本不对齐的问题。这个问题设置input的vertical-align:middle属性来解决。
　　我们来看下面的例子，如何解决文本输入框与文本对齐的问题！
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>resday.com</title>
  6. <style type="text/css">
  7. <!-- 
  8. #a {}{
  9.     height:30px;
  10.     border:1px solid #ccc;
  11.     }
  12. #b {}{
  13.     margin-top:20px;
  14.     height:30px;
  15.     border:1px solid #ccc;
  16.     }
  17.  
  18. #a input {}{
  19.     width:200px;
  20.     height:30px;
  21.     border:1px solid red;
  22.     }
  23. #b input {}{
  24.     width:200px;
  25.     height:30px;
  26.     border:1px solid red;
  27.     vertical-align:middle;
  28.     }
  29. -->
  30. </style>
  31. </head>
  32. <body>
  33. <div id="a"><input type="text" />yuzhiguo.com - Div+CSS布局常见问题</div>
  34. <div id="b"><input type="text" />yuzhiguo.com - Div+CSS布局常见问题</div>
  35. </body>
  36. </html>
在a中是未设置的样子。文本与文本框不能垂直对齐，很不美观。
在b中，设置了vertical-align:middle;解决了这一问题。文本与文本框垂直居中对齐。

本文地址：https://www.yuzhiguo.com/381/
  • 相关文章
  • 推荐文章
  • 最新文章
发表评论





您的IP：3.227.2.246，来自：

留言

 


免费咨询
建站咨询热线
15967985565

扫一扫微信咨询
QQ: 358758308 Skype: yuzhiguo Facebook: yuzhiguo Email