レスポンシブ対応　セレクトボックスの長さを揃えたい。

実現したいこと
クロームのデベロッパーツールで、レスポンシブ対応で、４８０px以下の画面で付属画像①のように支払方法のセレクトボックスをその上にある「メールアドレス」の入力フォームと同じように、画面の端から端まで揃えたいのですが、付属画像①のようにセレクトボックスの長さが短くなってしまいます。**PC表示では長さは同じです。**これをレスポンシブ対応でも、入力フォームと同じ長さで表示させたいです。

試したこと。
セレクトボックスのwidthの幅を大きくしてみたのですが、長さが変わらず。変わったとしても、他の入力フォームより長くなるため✖。
ｐｈｐコードの<style>内にある、**width: max-content;**というコード、これを消去すれば、レスポンシブ対応にはきちんとなるのですが、PCの大きさで見ると、付属画像②のようにセレクトボックス内の▼が飛び出て右に来てしまいます。

付属画像①

付属画像②

付属画像③

php
1<?php
2session_start();
3$errors = array();
4if(isset($_POST['submit'])) { 
5
6$email = $_POST['email']; 
7$pay = $_POST['pay'];
8if($email === "") { $errors['email'] ="メールアドレスが入力されていません。 ";
9}
10if($pay === "") { $errors['pay'] ="支払方法を選択してください。 ";
11}
12if(count($errors) === 0) {
13$_SESSION['email'] = $email; 
14$_SESSION['pay'] = $pay; 
15
16header('Location:http://△△');
17  exit();
18   }
19}
20if(isset($_GET['action']) && $_GET['action'] === 'edit'){
21$email = $_SESSION['email'];
22$pay = $_SESSION['pay'];
23 } 
24?> 
25
26<!DOCTYPE html> 
27
28<html>
29<head>
30<meta content="text/html; charset=utf-8"/>
31<meta name="viewport" content="width=device-width, initial-scale=1">
32 <title>お問い合わせ</title> 
33 <link rel="stylesheet" href="hdhd.css"> 
34 <link rel="stylesheet" href="responsive.css"> 
35
36 <style>
37
38 /* 入力フォームの位置 */     
39 .auto-style1 {
40     margin: auto;
41     text-align: center;
42   }
43/* セレクトボックスの位置 */ 
44
45.auto-style2 {
46   position: relative;
47	 margin: auto;
48	 text-align: center;/* セレクトボックス中央に配置 */ 
49   /* セレクトボックス中央に配置 */
50    
51    width: max-content;/*セレクトボックス内の▼をボックスの右端に配置 */
52    height: 56px;
53   
54 }
55 /* セレクトボックス内の矢印のデザイン hdhd.css内にもあり*/
56.auto-style2::before{
57position: absolute;
58
59top:1.4em;
60right:0.8em;
61width:0;
62height:0;
63padding: 0;
64content:"";
65border-left: 15px solid transparent;
66border-right: 15px solid transparent;
67border-top: 30px solid #63e02d;
68pointer-events: none;
69}
70</style>
71<?php echo "<ul>";foreach($errors as $value) {
72echo "<li>"; 
73echo $value; 
74echo "</li>"; 
75} 
76echo "</ul>";
77?>
78</head>
79<body>
80
81<form action ="hpform1.php" method ="post" class="auto-style1">
82
83  <div class="auto-style1">
84
85     <p class="px-num">      
86      メールアドレス：※  
87      </p>  
88             <input type="text" class="email" name="email" id="email" value="<?php if(isset($email)){ echo $email; } ?>"/>
89    
90  </div>
91
92  <p class="px-num">   
93    支払方法：※
94   </p>
95    <div class="auto-style2">
96
97   <select name="pay" class="pay" id="pay">
98     
99         <option value="">支払方法</option>
100           <option value="クレジットカード"<?php if(isset($pay) && $pay==="クレジットカード") { echo "selected" ;} ?>>クレジットカード</option>
101           <option value="銀行振込"<?php if(isset($pay) && $pay==="銀行振込") { echo "selected" ;} ?>>銀行振込</option>
102
103  </select>
104      
105 </div>
106
107 
108</form>
109 </body></html>

hdhd.css(フォーム、セレクトボックスのデザインのＣＳＳ）

css
1/* 入力フォームのスタイル */
2#email {
3    margin:0 auto;/* レスポンシブ対応中央 */
4    text-align: center;/* レスポンシブ対応中央 */
5    border: 3px solid #63e02d;  /* 枠線 */
6    padding: 0.5em;          /* 内側の余白量 */
7    background-color: snow;  /* 背景色 */
8    width: 29.3em;             /* 横幅 */
9    height: 56px;           /* 高さ */
10    font-size: 1em;          /* テキスト内の表示文字サイズ */
11    line-height: 1.2;        /* 行の高さ */
12    box-sizing: border-box;/* レスポンシブ対応中央 */
13}
14
15
16/* セレクトボックスのデザイン */
17#pay {
18    margin:0 auto;/* レスポンシブ対応中央 */
19    text-align: center;/* レスポンシブ対応中央 */
20    border: 3px solid #63e02d ;  /*#63e02d 枠線 */
21    padding: 0.5em;          /* 内側の余白量 */
22    background-color: snow;  /* 背景色 */
23    width: 24.3em;             /* 横幅 */
24    height: 56px;           /* 高さ */
25    font-size: 1.2em;          /* テキスト内の表示文字サイズ */
26 color: #000000;
27    line-height: 1.2;        /* 行の高さ */
28    box-sizing: border-box;/* レスポンシブ対応中央 */
29/* セレクトボックス内の矢印のデザイン autostyle2にもあり*/
30  cursor: pointer;
31  text-overflow: ellipsis;
32  outline:none;
33  -webkit-appearance:none;
34  appearance:none;
35
36}
37/* セレクトボックスの上下の余白， */
38select.pay{margin:8px 0px;}
39
40
41
42/* pxで指定 入力フォーム、セレクトボックスの上の文字タイトルの行間の大きさ、文字サイズ、太さ*/
43.px-num{
44  line-height: 0px;/* 文字の行間 */
45  font-size: 22px;/* 文字の大さ */
46  font-weight: 900;/* 文字の太さ */
47  text-align: center;/* 文字を中央に配置 */
48  color: #63e02d;
49}

responsive css（レスポンシブ対応のｃｓｓ）

css
1/* 画面幅（〜480px以下の時までの適応）指定 */
2@media screen and (max-width : 480px){
3        
4    #email {
5    width: 100%;
6      }
7    #pay {
8       width: 100%;
9      }
10  }
11  .auto-style1{
12  width:100%;
13  margin: auto;
14       text-align: center;
15  }

付属画像④.auto-style2にwitdh:24.3em;を追加した時のPCの画像位置ずれる　レスポンシブ対応も全体が効かない

付属画像⑤.auto-style2にwitdh:29.3em;を追加した時のPCの画像 PCの画像幅OK　、しかし、しかし、レスポンシブ対応の時セレクトボックスだけ長くなり、レスポンシブ対応効かなくなる。

付属画像⑥　.auto-style2にwidth: max-content;を消去する。PC画像✖三角の図形が右に行く。フォームの大きさはOK.　

レスポンシブ対応はOK.以下レスポンシブ対応の画像

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

回答1件

ベストアンサー

これ、前回の質問でも指摘させていただいた問題が解消されていないように見えます。
#emailでwidth: 29.3em;、#payでwidth: 24.3em;と、固定の長さを指定しているのが根本の問題なのではないでしょうか。

投稿2021/05/17 08:13

itagagaki

総合スコア8402

gujhufiugho

2021/05/17 08:26

回答ありがとうございます。#emailでwidth: 29.3em;、#payでwidth: 2９．3em;と同じにするとなぜか、PCで見るとセレクトボックスがメールアドレスのフォームよりも長く表示されてしまいます。なので、#payでwidth: 2４．3em;と少し、短くするとレスポンシブ対応関係なく、PCでみるとちょうど同じ大きさになります。

itagagaki

2021/05/17 08:27

どっちにしてもその設定が固定のサイズではレスポンシブ対応は無理です。前回の質問でも、テキストボックスの幅がビューポートより大きくなっていたのが原因でした。

gujhufiugho

2021/05/17 08:33

セレクトボックスと入力フォームを同じ大きさにするにはどうしたらよいでしょうか？なぜか、#emailでwidth: 29.3em;、#payでwidth: 2９．3em;と同じ横幅に設定しても、セレクトボックスの方が少し長くなってしまいます。

gujhufiugho

2021/05/17 08:38

#emailでwidth: 29.3em;、#payでwidth: 2９．3em;と同じ横幅に設定すると、PC表示（レスポンシブでない）状態、付属画像③のようになってしましいます。

itagagaki

2021/05/17 08:42

セレクトボックスの幅が小さいのは .auto-style2 の width が max-content になっているからですね。

gujhufiugho

2021/05/18 09:05

回答おくれました。すみません。昨日と今日やってみたのですが、.auto-style2でwidth: max-content ;をそのまま消去すると、付属画像⑥のように、PC画面でセレクトボックスの三角の図形が飛び出て右端に行ってしまいます。でも、レスポンシブではきちんと表示されます。もう一つ、.auto-style2にwidth２９．３emを追加すると、PCで三角の図形がセレクトボックスにきちんと配置されます。長さもPCではOK.しかし、レスポンシブ対応にするとセレクトボックスが長く表示されます。普通の入力フォームではwidth: 29.3em;、セレクトボックスでは#payでwidth: 2４．3em;で丁度同じ長さになります。

gujhufiugho

2021/05/18 09:09

.auto-style2にwidth２４．３emを追加すると、入力フォームとセレクトボックスの長さは同じになりますが、PC画面で少しセレクトボックスが左にずれてしまいます。付属画像④。そして、レスポンシブ対応のほうもそのずれた分だけ横幅が大きくなるのか？！レスポンシブ対応も効かなくなってしまいます。

gujhufiugho

2021/05/18 09:12

width: max-content ;をそのまま消去して、右端にはみ出た三角の図形をセレクトボックスに戻せれば、いいのですが、上手くいきません。

itagagaki

2021/05/18 09:12

サイズをemで指定するということはpxで指定するのと同じでサイズを固定することなので、さまざまな表示デバイスの画面サイズに応じて対応させるレスポンシブ対応にはなりません。 ChromeやEdgeのデベロッパーズツールを使えば、その要素にどのCSSがどう効いているか、継承関係や親子関係も含めて確認できますので、デベロッパーズツールの使いこなしを究める調べることをお勧めします。

gujhufiugho

2021/05/19 04:19

そうですね。ありがとうございますした。

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