【HTML】buttonの右寄せをしたい【CSS】

とても単純な修正をしたいだけなのですが、ちょっと作業が面倒かなと手を止めました。
buttonを右寄せするのに、divで囲む方法しか思いつきません。
他に何か良い方法は無いでしょうか。
（追記）
コード中、style内btn1の中身にこだわりはありません。要はbuttonが、bodyのwidth範囲で右に来てくれれば良いです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>右寄せ変更</title>
6<style>
7body { width: 640px; }
8.btn1 {
9  display: block;
10  width: 100%;
11  text-align: right;
12}
13.btnPos {
14  text-align: right;
15}
16</style>
17</head>
18<body>
19<p>
20こういうボタンについて↓
21</p>
22<p>文章１</p>
23<button type="button" class="btn0">次へ</button>
24<p>文章２</p>
25<button type="button" class="btn0">次へ</button>
26<p>
27ボタンは右寄せで配置したいのに、
28ビローンと伸びたボタンになってしまう。↓
29</p>
30<p>文章１</p>
31<button type="button" class="btn1">次へ</button>
32<p>文章２</p>
33<button type="button" class="btn1">次へ</button>
34<p>
35divで囲めば出来ることは分かっていますが↓
36</p>
37<p>文章１</p>
38<div class="btnPos">
39  <button type="button" class="btn2">次へ</button>
40</div>
41<p>文章２</p>
42<div class="btnPos">
43  <button type="button" class="btn2">次へ</button>
44</div>
45<p>
46できればスタイルシートbtnの変更だけで済むと助かるのですけど・・・
47</p>
48</body>
49</html>
50

使用ブラウザはChrome最新です。

m.ts10806

2018/05/23 05:07

buttonのwidthが%なのはなぜでしょうか？固定サイズではダメなんですか？

himejiy3

2018/05/23 05:20

bodyのwidthが固まらず、今後、変更の可能性がかなり高いのでこのようにしていました。固定サイズなら上手い方法があるのでしょうか？

m.ts10806

2018/05/23 05:27

可変だと親のwidthに合わせて伸び縮みするので、可変にしたい場合はbodyより直近のdivなどの親要素でwidth制御する必要があるようには感じました。

回答2件

ベストアンサー

こういうのはいかがでしょうか？

css
1.btn1 {
2  display: block;
3  margin: 0 0 0 auto;
4}

投稿2018/05/23 06:07

編集2018/05/23 06:08

xyunow

総合スコア122

回答へのコメント

kszk311

2018/05/23 06:20

floatより良さそうですね

himejiy3

2018/05/23 07:12

回答ありがとうございます。 kszk311さんに頂いた回答も含め、どちらも原文ソースコード上、問題無さそうな感じです。どうにも基本すぎて、自分の勉強不足を痛感します。

himejiy3

2018/05/23 08:49

２つの回答は内部的に微妙な違いがあるようですが、今回の私のコードではどちらも期待通りに表示しました。個人的にこちらのほうが分かりやすいかなと感じたので、こちらをベストアンサーにします。ありがとうございました。

floatでどうでしょう？
floatの次の要素には、clearかけておきましょう。

css
1.btn1 {
2	float: right;
3}
4.btn1 + * {
5	clear: both;;
6}
7

投稿2018/05/23 05:08

kszk311

総合スコア3402

回答へのコメント

himejiy3

2018/05/23 06:59

回答ありがとうございます。恥ずかしながら、結合子による兄弟セレクタとclear:bothの存在を知りませんでした。勉強になりました。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する