0

我有一个 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 中。

4

2 回答 2

1

该页面还有其他内容吗？您使用的是哪个版本的 Firefox？我使用 FireFox 18.0.2 测试了您的代码，并得到了您正在寻找的结果，如您在此屏幕截图中所见。好吧，我尝试发布图像，但是由于我是新来的，因此我的声誉还不足以发布图像。一个人将不胜感激。尝试 CSS 重置。

于 2013-08-20T19:05:39.200 回答
0

尝试在您的元素上使用垂直对齐：

vertical-align: top;
于 2013-08-20T19:09:25.323 回答