是否可以使带有 inline-block 的 DIV 的行为与带有align=left 的IMG 完全相同？

Question

在下面的示例中，使 DIV inline-block 关闭 valign 效果。是否可以像下一行的 IMG 一样将其带回来？

<table border="1">
<tr>
    <td height="50" valign="top">

        <div style="display:inline-block; width:65px; height:40px; background-color: yellow; text-align: left;"></div>
        <input type="button" value="button">

         Some text

    </td>
</tr>

<tr>
    <td height="50" valign="top">

        <img src="images/spacer.gif" width="65" height="40" align="left" border="1">
        <input type="button" value="button">

         Some text

    </td>
</tr>

</table>

Answer 1

将 vertical-align: top; 添加到

中。

<div style="display:inline-block; width:65px; height:40px; background-color: yellow; text-align: left;border: 1px solid black;vertical-align:top;"></div>

演示：http://jsfiddle.net/ThinkingStiff/xvpYF/

HTML：

<table border="1">
<tr>
<td height="50" valign="top">
    <div style="display:inline-block; width:65px; height:40px; background-color: yellow; text-align: left;border: 1px solid black;vertical-align:top;"></div>
    <input type="button" value="button">
     Some text
</td>
</tr>
<tr>
<td height="50" valign="top">
    <img src="images/spacer.gif" width="65" height="40" align="left" border="1">
    <input type="button" value="button">
     Some text
</td>
</tr>
</table>

输出：

Answer 2

尝试将其置于 float:left

http://jsfiddle.net/pixelass/XDNe6/

<table border="1">
<tr>
    <td height="50" valign="top">

        <div style="display:inline-block;float:left; width:65px; height:40px; background-color: yellow; text-align: left;"></div>
        <input type="button" value="button">

         Some text

    </td>
</tr>

<tr>
    <td height="50" valign="top">

        <img src="images/spacer.gif" width="65" height="40" align="left" border="1">
        <input type="button" value="button">

         Some text

    </td>
</tr>

</table>