【CSS】テキストを一行で左右に分けるときのCSS

よくタイトルバーなどで左側にタイトルで右側に、「日付」や「一覧はこちら」のようにテキストが左右に分けてある場合があります。

まずはそれぞれ寄せたいテキストを「text-align」プロパティを使って振分ける。

HTMLはこんな感じ

<div class="title">
    <h2>はタイトル</h2>
    <p>一覧はこちら</p>
</div>

このHTMLを以下のようにする場合

.title{
    background-color:#000000;
    width:100%;
}
h2{
    text-align:left;
    float:left;
    font-size:18px;
    padding:0;
    margin:0;
}
 
div.title p{
    font-size:14px;
    text-align:right;
    padding:0;
    margin:0;
}