テキストを1行で改行せずに左右に分けて表示するためのCSS

スポンサーリンク

以下のようにテキストをうまく左右に分けて表示したい事って結構あると思う。

 

けど、うまくいかずに以下のように位置がずれる事もよくあると思う。(自分だけ?w)

 

 

ということで、うまくいく方のソースを以下にメモしておく。

<div>
<p style="float: left;"><a href="#"><<前ページ</a></p>
<p style="text-align: right;"><a href="#">>>次ページ</a></p>
</div>
<div style="clear: both;"></div>

 

もちろん、上記のようにHTMLソース内でのスタイルシート記述はあまり好ましくはないので、通常は別CSSファイル内に記述するべきだろう。
まあでも実際問題、単発で使う時は面倒くさいので上記でも良いかとw

コメント