HTMLの内容の送信ボタンを右寄せしたいです・・。

実現したいこと

HTMLの内容の送信ボタンを右寄せしたいです。

発生している問題・分からないこと

HTMLの内容の送信ボタンを右寄せしたいんですが

＜ＨＴＭＬの内容＞↓

＜ＣＳＳの内容＞
.submit1 {
text-align: right;
}
で入力しても出来ません。なにか良い方法がないでしょうか？

該当のソースコード

＜ＨＴＭＬの内容＞↓
<div>
    <input type="submit" name="submit1" value="送信">
 </div>

＜ＣＳＳの内容＞
.submit1 {
  text-align: right;
}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

検索し、色々試したができず。

補足

特になし

行動規範の内容に同意します

回答2件

親要素に設定してください

CSS
1<div class="wrap">
2<input type="submit" name="submit1" class="submit1" value="送信">
3</div>
4
5<style>
6.wrap{
7  text-align:right;
8}
9</style>

そもそもCSSで「.submit1」を指定していますがサブミットボタンにsubmit1クラスは付加されていませんよね

投稿2024/04/18 05:44

yambejp

総合スコア117624

erika.yamada

2024/04/18 13:04

回答ありがとうございます。ベストアンサーは別の方を選ばせていただきましたが、こちらの回答も非常に参考になりました。

行動規範の内容に同意します

ベストアンサー

ラップしている<div>に対してalignをつけないと右にできませんよ。

あと気になった部分として
cssを.submit1で指定してるみたいですが
<input type="submit" name="submit1" value="送信">のところclass指定されてないので
そもそもclassも当たっていないです。
classをinputタグに当てる場合は以下のようにしてください。
<input type="submit" name="submit1" class="submit1" value="送信">
name属性は実際にメールで送る際に必要になる値です。

サンプルコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <style>
8        .wrap {
9            text-align: right;
10        }
11        /* .submit1 {
12            text-align: right;
13        } */
14    </style>
15</head>
16<body>
17    <div class="wrap">
18        <input type="submit" name="submit1" value="送信">
19    </div>
20</body>
21</html>