Input and Img align

将近一周没有更新了，无论是原创还是转载都没有。趁着这个闲得发慌的下午赶紧凑合一篇上去。

话说这是公司项目上的一个问题，嗯，这应该不违反公司的那个啥保密协议哈。

HTML结构是这样的：

 
  1. <div>
  2.      <input type="text" />
  3.      <a href="http://www.jsann.com">
  4.         <img src="http://www.jsann.com/image/link/link_002.gif" />
  5.      </a>
  6.      <input class="sub" type="button" value="Submit" />
  7.      <a href="http://www.jsann.com">[既是安安]</a>
  8. </div>

需求：横排显示。

本来应该是个很简单的需求，默认的情况下。他们就是横排的，可是纠结的是他们总是对不齐。

事实上我我也用了align属性，以前的话，都是用的align = “absmiddle”，这个就算是我把align的值乱搭配一气也总是有一些浏览器对不齐，比较好处理的是人称“怪胎”的Opera。

冥冥想想，如果Float的话，那么岂非元素都会顶对齐？

用Firebug测试了一下，效果良好，如此就只需简单的控制margin就可以了，哈哈。TEST CODE如下（DOME在这里）：

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>align</title>
  6. <style type="text/css">
  7. *
  8. {
  9.     padding:0;
  10.     margin:0;
  11.     font-size:12px;
  12.     font-family:Arial, Helvetica, sans-serif;
  13. }
  14. body
  15. {
  16.     padding:50px;
  17. }
  18. div
  19. {
  20.     width:600px;
  21.     height:33px;
  22.     line-height:31px;
  23. }
  24. div input
  25. {
  26.     width:200px;
  27.     border:#AAA solid 1px;
  28.     height:30px;
  29.     font-size:22px;
  30.     font-weight:bold;
  31.     line-height:30px;
  32.     color:#999;
  33. }
  34. div input.sub
  35. {
  36.     height:31px;
  37. }
  38. div img
  39. {
  40.     border:0;
  41. }
  42. div.fl *
  43. {
  44.     float:left;
  45.     margin:1px 2px;
  46. }
  47. </style>
  48. </head>
  49. <body>
  50.     <div>
  51.         <input type="text" />
  52.         <a href="http://www.jsann.com">
  53.             <img src="http://www.jsann.com/image/link/link_002.gif" />
  54.         </a>
  55.         <input class="sub" type="button" value="Submit" />
  56.         <a href="http://www.jsann.com">[既是安安]</a>
  57.     </div>
  58.     <br />
  59.     <br />
  60.     <br />
  61.     <div>
  62.         <input align="absmiddle" type="text" />
  63.         <a href="http://www.jsann.com">
  64.             <img align="absmiddle" src="http://www.jsann.com/image/link/link_002.gif" />
  65.         </a>
  66.         <input align="absmiddle" class="sub" type="button" value="Submit" />
  67.         <a href="http://www.jsann.com">[既是安安]</a>
  68.     </div>
  69.     <br />
  70.     <br />
  71.     <br />
  72.     <div class="fl">
  73.         <input type="text" />
  74.         <a href="http://www.jsann.com">
  75.             <img src="http://www.jsann.com/image/link/link_002.gif" />
  76.         </a>
  77.         <input class="sub" type="button" value="Submit" />
  78.         <a href="http://www.jsann.com">[既是安安]</a>
  79.     </div>
  80. </body>
  81. </html>

posted on 2011-09-14 09:39  I am fine !  阅读(281)  评论(0)  编辑  收藏  举报