先是前台代码
- HTML code
<table id="SelectTable" width="400px" border="0" cellpadding="0" cellspacing="0" style="margin-bottom:10px"> <tr><td style="height:20px"><input id="text_Select" type="text" value="//请输入要查询的内容" /><img src="../Styles/Images/MenuBgImage.png" alt="" height="20px" width="58px"</td></tr> <tr><td>热门关键字</td></tr> </table>
下面是CSS
- CSS code
#SelectTable td{ text-align:center; vertical-align:middle; line-height:100%;}#text_Select{ width:268px; border-style:solid; border-color:Gray; border-width:1px; height:20px; font-size:10px;}#btn_Select{ height:20px; width:58px; border-bottom-style:solid; border-width:1px; border-color:Gray; background-image:url('../Images/MenuBgImage.png');}根本对不齐啊 那个文本框 和 按钮老是上下错位 而且 如果两个调一样的高度的话 按钮总是比文本框窄 郁闷啊 各位大虾给个答案吧~
------解决方案--------------------
<table id="SelectTable" width="400px" border="0" cellpadding="0" cellspacing="0" style="margin-bottom:10px">
<tr>
<td style="height:20px; text-align:right;"><input id="text_Select" type="text" value="//请输入要查询的内容" /></td><td style="text-align:left">
<img src="MenuBgImage.png" alt="" height="20" width="58"/></td>
</tr>
<tr><td colspan="2">热门关键字</td></tr>
</table>