html - 内联 block 显示以 Firefox 为中心

Question

我有一个 h2 和 h3 元素，我想将它们显示为行内 block 。这是标记:

<div id="content" class="content-width">
    <h2 class="headline"> My Headline </h2>
    <h3 class="subheadline"> My Subheadline </h3>
    <table id="actions">
        ... some table content
    </table>
    <div> more content... </div>
</div>

这是CSS:

div.content-width {
    width: 90%;
    margin: 0 auto;
    min-width: 900px;
}

h2.headline {
    margin: 30px 0 0 0;
    padding: 0;
    display: inline-block;
    font-size: 30px;
}

h3.subheadline {
    padding: 30px 0 0 0;
    display: inline-block;
    font-size: 16px;
    margin: 0 0 0 8px;
    color: #b3b3b3;
}

table#actions {
    float: right;
    padding: 0;
    margin: 34px 0 0 0;
}

我认为这会将 h2 和 h3 显示在左侧，相反，h2 位于中间，h3 在其旁边并且表格 float 在 h2 和 h3 元素下方，就好像 h2 和 h3 都在一 block 。这在 chrome 中显示如我所料。

Answer 1

页面还有其他问题吗？您使用的是什么版本的 Firefox？我使用 FireFox 18.0.2 测试了您的代码并获得了您正在寻找的结果，如您在此屏幕截图中所见。好吧，我试图张贴图片，但由于我是新来的，我的声誉不够高，无法张贴图片。 A one up 将不胜感激。尝试重置 CSS。