文章の後半を右寄せしたい

こんにちは。タイトルどおりなのですが、一つの文章内の後半部分を右寄せしたいのですが、どうしたら出来ますか？（改行せずに）

<p>あいうえお　<span>かきくけこ</span></p>
span { text-align: right; }

とやってみましたが、右寄せできませんでした。
やり方が間違っていますか？どうしたら右寄せできるでしょうか？
かきくけこ　の部分を右寄せしたいです。教えて下さい。よろしくお願いします。

No.4 ベストアンサー 回答者： goldfox 回答日時： 2007/02/02 17:12

1行のみで考えていいのか、それとも複数行に渡る文章の最後の1単語（もしくは数単語）のみを右寄せにしたいという話なのかで、書き方も変わってくると思います。

p { position:relative; width:100%; }
span { position:absolute; right:0: bottom:0; }
<p>あいうえお　<span>かきくけこ</span></p>
positionは文字数や文字サイズを変えて表示確認をしてから使用するほうがよいかと思いますが。

この回答へのお礼

できました！！！！
ありがとうございました。感謝します！
本当にありがとうございました。

お礼日時：2007/02/05 12:14

No.3 回答者： ratoa 回答日時： 2007/02/02 13:05

これはひとつの文章、つまりひとつのp要素でなければいけないんでしょうか？

詳しい内容が分からないのですが、左右に分けて表示する必要があるものが、ひとまとまりの文章であるとは考えにくいです。
これを見る限りでは、「あいうえお」と「かきくけこ」を別のp要素とするか、内容次第ではdl要素やtable要素でもいい気がします。
なぜ1行の中で左右に分ける必要があのか。その理由によってマークアップの仕方も変わるし、その後の対応も変わるので、まずはそれを考えた上でhtmlを書くことをお勧めします。

この回答へのお礼

そうですね。もう少しきちんと質問するべきでした。すみませんでした。
--------------------------------------------------------------
トップページ　　　　　　　　　　　　　　　　　　　ようこそ〇〇へ
---------------------------------------------------------------
としたかったので、1行内に左右に分けたかったんです。他にいい方法がわからなかったので。
違う方法を考えてみたいと思います。ありがとうございました。

お礼日時：2007/02/05 12:07

No.2 回答者： yambejp 回答日時： 2007/02/02 12:25

とりあえずこんな感じでどうでしょう？

spanをfloatした上で、pのline-height分、spanを上げてあげる。
（色はみやすくするためにつけてあるだけです）

<style type="text/css">
p{
background-color:red;
line-height:1.2em;
}
span {
float: right;
background-color:blue;
margin-top:-1.2em;
}
</style>
<p>あいうえお<span>かきくけこ</span></p>

この回答へのお礼

ありがとうございました。

お礼日時：2007/02/05 12:16

No.1 回答者： kaz-5919 回答日時： 2007/02/02 12:09

spanのスタイルシートにwidthで指定すればその分だけ右に寄りますよ

完全に寄せるには調整しなければいけませんが。。

この回答への補足

widthで指定したのですが、できませんでした。ありがとうございました。

補足日時：2007/02/05 12:16