- 締切済み
文字の右揃えと左そろえ
こんばんは。質問させていただきます。 一行に ○○○○○○ △△■■ といったように 文字を右寄せと左寄せを行いたいのですが 試してみたところ △△■■の部分が改行されてしまいます。 どのようにしたら改善されますでしょうか？ ｃｓｓ .header-font { font-size:small } .header-align { text-align:right;} #header{ background:yellow; background-image:http://www.livedoor.com/r/h_logo; width: 900px; height: 100px; } ｈｔｍｌ <div id="header"> <p class="header-font">2009年07月16日(木) 何の日？：駅弁記念日 有名人の誕生日：福田康夫 <div class="header-align">カテゴリ一覧 ツールバー ホームに設定</div></p> </div> ご指南の方よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- saieikoku
- ベストアンサー率0% (0/1)
<p class="header-font"> を <p class="header-font" style="float:left;"> とすることで、実現できると思いますが。
■headerの部分はパディングで高さと余白を調整してください。 ＊のリセットは常に入れてください。 Floatでいいです。一度clearfixを検索してみてください。そうすればfloatの振る舞いが理解できると思います。 *{ margin: 0px; padding: 0px; } .header-font { font-size:small; float: left; width: 50%; } .header-align { text-align:right; float: right; width: 50%; } #header{ background:yellow; background-image:http://www.livedoor.com/r/h_logo; width: 900px; height: 100px; }
- shiraito
- ベストアンサー率50% (3/6)
<p>を<div>にしてfloatをかけたらできると思います。 .header-font { font-size:small; float:left; } .header-align { text-align:right; } #header{ background:yellow; background-image:http://www.livedoor.com/r/h_logo; width: 900px; height: 100px; } <body> <div id="header"> <div class="header-font">2009年07月16日(木) 何の日？：駅弁記念日 有名人の誕生日：福田康夫</div> <div class="header-align">カテゴリ一覧 ツールバー ホームに設定</div> </div>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
ご回答のほうありがとうございます。こちらの方法でやってみましたところやはり上手く反映されずなぜかヘッダーの高さが倍になったという感じでございました＞＜；何度も見直しこのように入力させてもらったのですが。。。何故だかわかりますでしょうか＞＜？