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

質問

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

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

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

回答No.4

goldfox · ベストアンサー

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

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

お礼

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

回答No.3

noname#261745

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

お礼

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

回答No.2

yambejp

とりあえずこんな感じでどうでしょう？
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>

お礼

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

回答No.1

kaz-5919

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

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

補足

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