html - CSS Header 对齐在同一行

Question

我有两个标题，我想在同一行显示，但一个在左边，一个在右边。做这个的最好方式是什么？

JSFiddle

HTML：

<h2 style="color: green" style="text-align : center">Approved</h2><h4>Count: </h4>

CSS：

h2 {
    font-size: 11.5pt;
    font-family: Georgia;
    display: inline;
}
h1 {
    margin: 0.5em 0 0.5em 0;
    padding: 0.5em 0 0.5em 10px;
    font-size: 12pt;
    font-family: Georgia;
    color: white;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    display: inline;
}

Answer 1

您可以float向每个标题添加一个属性，例如：

h2 { float: left; }

和

h1 { float: right }

Answer 2

你可以使用浮动。

h2 {
    font-size: 11.5pt;
    font-family: Georgia;
    display: inline;
    float:right;
}
h1 {
    margin: 0.5em 0 0.5em 0;
    padding: 0.5em 0 0.5em 10px;
    font-size: 12pt;
    font-family: Georgia;
    color: white;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    display: inline;
    float:left;
}

Answer 3

尝试这个

演示

<div class="first"><h1 style="color: green" style="text-align : center">Approved</h1><h2>Count: </h2></div>