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

chapp | 2019年6月1日 | CSS | コメントはまだありません

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

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

HTMLはこんな感じ

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

<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;
}

.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;

}

端くれエンジニアの備忘録

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

About The Author

chapp

Add a Comment