質問編集履歴

1

【補足】 添付画像の通り、クイズを囲っているグレーの枠を 子要素2に囲いたいのですが表示方法についてご教示いただけますと幸いです。

2021/04/11 09:05

投稿

Rinriinrinrin
Rinriinrinrin

スコア13

test CHANGED
File without changes
test CHANGED
@@ -28,8 +28,6 @@
28
28
 
29
29
  ```JavaScript
30
30
 
31
-
32
-
33
31
  const quiz = [
34
32
 
35
33
  {
@@ -94,7 +92,7 @@
94
92
 
95
93
  while(btnIndex < buttonLen){
96
94
 
97
- $buttons[btnIndex].textContent = quiz[quizCount].answers[btnIndex];
95
+ $buttons[btnIndex].nextElementSibling.textContent = quiz[quizCount].answers[btnIndex];
98
96
 
99
97
  btnIndex++;
100
98
 
@@ -298,40 +296,42 @@
298
296
 
299
297
 
300
298
 
301
- <div id="js-items" class="d-flex justify-content-center">
299
+ <div id="js-items" class="">
302
300
 
303
301
  <div class="m-2">
304
302
 
305
- <button type="button" id="js-btn-1" class="btn btn-primary">Primary</button>
303
+ <input type="button" id="js-btn-1" class="btn btn-primary">
304
+
305
+ <label for="js-btn-1">Primary</label>
306
306
 
307
307
  </div>
308
308
 
309
309
  <div class="m-2">
310
310
 
311
- <button type="button" id="js-btn-2" class="btn btn-primary">Primary</button>
311
+ <input type="button" id="js-btn-2" class="btn btn-primary">
312
-
312
+
313
- </div>
313
+ <label for="js-btn-2">Primary</label> </div>
314
314
 
315
315
  <div class="m-2">
316
316
 
317
- <button type="button" id="js-btn-3" class="btn btn-primary">Primary</button>
317
+ <input type="button" id="js-btn-3" class="btn btn-primary">
318
-
318
+
319
- </div>
319
+ <label for="js-btn-3">Primary</label> </div>
320
320
 
321
321
  <div class="m-2">
322
322
 
323
- <button type="button" id="js-btn-4" class="btn btn-primary">Primary</button>
323
+ <input type="button" id="js-btn-4" class="btn btn-primary">
324
+
325
+ <label for="js-btn-4">Primary</label> </div>
326
+
327
+ </div>
328
+
329
+ </div>
330
+
331
+ <div id="child2">子要素2</div>
324
332
 
325
333
  </div>
326
334
 
327
- </div>
328
-
329
- </div>
330
-
331
- <div id="child2">子要素2</div>
332
-
333
- </div>
334
-
335
335
  </div>
336
336
 
337
337
 
@@ -346,4 +346,10 @@
346
346
 
347
347
 
348
348
 
349
+ 【補足】
350
+
351
+ 添付画像の通り、クイズを囲っているグレーの枠を
352
+
349
- クイズの選択肢を横並びから縦表示させ表示させる方法えていただけ嬉しいです。
353
+ 子要素2囲いですが表示方法についてごいただけますいです。
354
+
355
+ ![イメージ説明](d72f7d6b6e868e89aaed07307e94eb3a.png)