html - 如何在 IE7 中水平对齐按钮(不同形式)

Question

我有以下代码，其中包含 3 个按钮:

<div id="button-panel">
    <form action="../edit/" method="GET">
     <input type="hidden" name="id" value="<?php echo $record->id; ?>" />
     <input type="submit" value="Edit" />
    </form>

    <form action="" method="POST">
     <input  type="submit" name="cancel_btn" value="Cancel" />
    </form> 

  <input type="button" id="boh-url-gen" value="Generate URL" onClick="generateURL();" />                    
</div>  <!-- button-panel -->

尽管我很努力，但按钮在 IE7 中垂直对齐。目前我应用了以下 CSS:

#button-panel *{display:inline-block;}

但是，它不适用于 IE7。

Answer 1

这仅仅是因为 IE7 不完全支持 display:inline-block。 Reference here.

如果你想要完全支持，只需 float 元素即可。

#button-panel {
    float:left; /* right */
}

请注意， float 元素会将其从流中移除，因此您可能需要向父级添加类似 overflow:auto 的内容 - 假设内容因固定的 height< 而折叠/宽度 未设置。