Question

我有一个h2和h3元素，我想显示为内联块。这是标记：

<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紧挨着它，桌子漂浮在h2和h3元素下，好像h2和h3都是一个街区。这显示为我希望它在chrome中。

Answer 1

页面上还有其他任何内容吗？您使用的是哪个版本的Firefox？我使用FireFox 18.0.2测试了您的代码，并获得了您正在寻找的结果，正如您在此屏幕截图中看到的那样。好吧，我试图发布图像，但由于我是新手，我的声誉不够高，无法发布图像。一个人将不胜感激。尝试CSS重置。

Answer 2

尝试在元素上使用vertical-align：

vertical-align: top;

以Firefox为中心的内联块显示

2 个答案: