文字の右揃えと左そろえ

締切済

質問者：csstarou
質問日時：2009/07/27 23:03
回答数：3件

こんばんは。質問させていただきます。
一行に
○○○○○○　　　　　　　　　　　△△■■
といったように
文字を右寄せと左寄せを行いたいのですが
試してみたところ
△△■■の部分が改行されてしまいます。
どのようにしたら改善されますでしょうか？
ｃｓｓ
.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件)

最新から表示
回答順に表示

No.1

回答者： shiraito
回答日時：2009/07/27 23:34

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

- 0
- 件

通報する

この回答へのお礼

ご回答のほうありがとうございます。こちらの方法でやってみましたところやはり上手く反映されずなぜかヘッダーの高さが倍になったという感じでございました＞＜；何度も見直しこのように入力させてもらったのですが。。。何故だかわかりますでしょうか＞＜？

通報する

お礼日時：2009/07/28 01:02

No.2

回答者： noname#119957
回答日時：2009/07/27 23:35

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