Google chrome Chrome-输入在div中对齐（适用于FF和IE）

在的主页上，我发现页面右上角的两个输入（“Rechercher”文本字段和“OK”按钮）有问题。
事实上，我的CSS可以在FF&IE上使用，但不能在Chrome上使用。
为了使它更通用，它只是一个div中的两个输入。
你能帮我纠正Chrome上的这种错误行为吗

谢谢大家

Rechercher文本字段的CSS:

 #champ_recherche_style {
height:14px;
margin-bottom:15px;
margin-top:15px;
width:150px;
}

 #habillage_bouton_texte_recherche_style {
background-color:#8C8C8C;
color:#FFFFFF;
display:inline;
font-family:Verdana;
font-size:11px;
font-weight:bold;
margin:15px 1px 0 10px;
padding:0 3px;
text-decoration:none;
vertical-align:top;
}

<table>
    <tr>
        <td> INPUT IS HERE </td>
    </tr>
</table>
BUTTON IS HERE

<table>
    <tr>
        <td> INPUT GOES HERE </td>
        <td> BUTTON GOES HERE </td>
    </tr>
</table>

确定按钮的CSS:

 #champ_recherche_style {
height:14px;
margin-bottom:15px;
margin-top:15px;
width:150px;
}

 #habillage_bouton_texte_recherche_style {
background-color:#8C8C8C;
color:#FFFFFF;
display:inline;
font-family:Verdana;
font-size:11px;
font-weight:bold;
margin:15px 1px 0 10px;
padding:0 3px;
text-decoration:none;
vertical-align:top;
}

<table>
    <tr>
        <td> INPUT IS HERE </td>
    </tr>
</table>
BUTTON IS HERE

<table>
    <tr>
        <td> INPUT GOES HERE </td>
        <td> BUTTON GOES HERE </td>
    </tr>
</table>

div的CSS:

 #encart_recherche_style {
padding-left:746px;
text-align:center;
width:210px;
}

---

一般来说，表格的布局很糟糕，但如果必须使用它们，只需将按钮放在输入的TD之后的TD中，而不是将输入字段单独放在表格中，并试图强制表格内联显示

我强烈建议将来学习如何在布局中使用CSS

再说一遍，我不推荐使用表格进行布局，但是

而不是：

 #champ_recherche_style {
height:14px;
margin-bottom:15px;
margin-top:15px;
width:150px;
}

 #habillage_bouton_texte_recherche_style {
background-color:#8C8C8C;
color:#FFFFFF;
display:inline;
font-family:Verdana;
font-size:11px;
font-weight:bold;
margin:15px 1px 0 10px;
padding:0 3px;
text-decoration:none;
vertical-align:top;
}

<table>
    <tr>
        <td> INPUT IS HERE </td>
    </tr>
</table>
BUTTON IS HERE

<table>
    <tr>
        <td> INPUT GOES HERE </td>
        <td> BUTTON GOES HERE </td>
    </tr>
</table>

输入在这里
按钮在这里

试试这个：

 #champ_recherche_style {
height:14px;
margin-bottom:15px;
margin-top:15px;
width:150px;
}

 #habillage_bouton_texte_recherche_style {
background-color:#8C8C8C;
color:#FFFFFF;
display:inline;
font-family:Verdana;
font-size:11px;
font-weight:bold;
margin:15px 1px 0 10px;
padding:0 3px;
text-decoration:none;
vertical-align:top;
}

<table>
    <tr>
        <td> INPUT IS HERE </td>
    </tr>
</table>
BUTTON IS HERE

<table>
    <tr>
        <td> INPUT GOES HERE </td>
        <td> BUTTON GOES HERE </td>
    </tr>
</table>

输入到这里
按钮在这里

在您的表中使用内联块而不是内联块将使您更接近您想要的行为。

我很乐意更改html代码，我同意您的看法，这非常可怕。不幸的是，我们使用了一个专有的CMS，我们只能访问CSS。。不是htlm：（我不能让它工作。）事实是模板很糟糕，但我有可能修改CSS。没有人能找到为什么按钮“OK”不在同一行？一定是一个对象造成了这种混乱：'（非常感谢！：D