質問編集履歴

3

あああああああああああああああああああああああああああああああああああああああああああああああ

2022/05/17 11:04

投稿

wassan_nikoniko
wassan_nikoniko

スコア9

test CHANGED
@@ -1 +1 @@
1
- inputの行の開始位置揃えたい
1
+ 自己解決したため生地落とします
test CHANGED
@@ -1,189 +1 @@
1
- ### 前提・実現したいこと
2
-
3
-
4
-
5
- タイトルの通りになりますが、このコードでいうジャンルの位置にinputの行の開始位置をすべて揃えたいです。
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
- ### 該当のソースコード
14
-
15
-
16
-
17
- ```html
18
-
19
- <!DOCTYPE html>
20
-
21
- <html lang="ja">
22
-
23
- <head>
24
-
25
- <meta charset="utf-8" />
26
-
27
- <link rel="stylesheet" href="style.css">
28
-
29
- <title>タイトル</title>
30
-
31
- </head>
32
-
33
- <body>
34
-
35
- <p class="left-title">商品情報管理システム<p> <p class="center-title">商品情報登録</p>
36
-
37
- <div class="sub-button">
38
-
39
- <button type="submit" style="width:70px; height:40px;">登録</button>
40
-
41
- </div>
42
-
43
- <div class="container">
44
-
45
- <label class="pull-label">ジャンル:<select size="1" name="sample" class="Product-pulldown">
1
+ ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
46
-
47
- 04
48
-
49
- <option value="sample">サンプル1</option>
50
-
51
- 05
52
-
53
- <option value="sample">サンプル2</option>
54
-
55
- 06
56
-
57
- <option value="sample">サンプル3</option>
58
-
59
- 07
60
-
61
- <option value="sample">サンプル4</option>
62
-
63
- 08
64
-
65
- <option value="sample">サンプル5</option>
66
-
67
- 09
68
-
69
- </select>
70
-
71
-
72
-
73
- </label>
74
-
75
-
76
-
77
-
78
-
79
- <div class="form">
80
-
81
- <div>メーカー:<input type="text" size="21"></div>
82
-
83
- <div>商品名:<input type="text" size="21"></div>
84
-
85
- <div>販売価格:<input type="text" size="21"></div>
86
-
87
- <div class="acount">アカウント:<input type="text" size="21" name="ac"></div>
88
-
89
- <div class="pass">パスワード:<input type="password" size="21" name="pw"></div>
90
-
91
- </div>
92
-
93
- </div>
94
-
95
- </body>
96
-
97
- </html>
98
-
99
- ```
100
-
101
-
102
-
103
-
104
-
105
- ```css
106
-
107
- body{
108
-
109
- width:100%;
110
-
111
- }
112
-
113
-
114
-
115
- .left-title{
116
-
117
- font-size:20px;
118
-
119
- font-weight:bold;
120
-
121
- }
122
-
123
- .center-title{
124
-
125
- font-weight:bold;
126
-
127
- text-align:center;
128
-
129
- font-size:20px;
130
-
131
- }
132
-
133
- .sub-button{
134
-
135
- margin-left:65%;
136
-
137
- }
138
-
139
- button{
140
-
141
- font-weight:bold;
142
-
143
- border:1px solid black;
144
-
145
- border-radius:5px;
146
-
147
- background-color:gray;
148
-
149
- }
150
-
151
-
152
-
153
- .container{
154
-
155
- margin-left:35%;
156
-
157
- }
158
-
159
- .Product-pulldown{
160
-
161
- width:40%;
162
-
163
- }
164
-
165
- label{
166
-
167
- display:block;
168
-
169
- }
170
-
171
- .form{
172
-
173
-
174
-
175
- }
176
-
177
-
178
-
179
-
180
-
181
- ```
182
-
183
-
184
-
185
- ![![イメージ説明](50c109fc7f81d0bf899be8871d911682.png)](844eaaae3792ff32fecf284f6830ba38.png)
186
-
187
-
188
-
189
- ![![イメージ説明](c399196e5453728eb9011cca470350de.png)説明](0dc8210aec580dc8220815f38f480de5.png)](854fb48cd52380dd39edab1a96fd0461.png)

2

イメージ図

2021/07/29 08:44

投稿

wassan_nikoniko
wassan_nikoniko

スコア9

test CHANGED
File without changes
test CHANGED
@@ -183,3 +183,7 @@
183
183
 
184
184
 
185
185
  ![![イメージ説明](50c109fc7f81d0bf899be8871d911682.png)](844eaaae3792ff32fecf284f6830ba38.png)
186
+
187
+
188
+
189
+ ![![イメージ説明](c399196e5453728eb9011cca470350de.png)説明](0dc8210aec580dc8220815f38f480de5.png)](854fb48cd52380dd39edab1a96fd0461.png)

1

image add

2021/07/29 08:44

投稿

wassan_nikoniko
wassan_nikoniko

スコア9

test CHANGED
File without changes
test CHANGED
@@ -179,3 +179,7 @@
179
179
 
180
180
 
181
181
  ```
182
+
183
+
184
+
185
+ ![![イメージ説明](50c109fc7f81d0bf899be8871d911682.png)](844eaaae3792ff32fecf284f6830ba38.png)