CSS标题对齐在同一行

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>