日期:2014-05-20  浏览次数:20692 次

在开发环境里看是写好了,可是一运行就错位了
先是前台代码
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>