teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

文法

2018/09/06 03:20

投稿

rice_medicine
rice_medicine

スコア15

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,8 @@
1
1
  HTMLとCSSを勉強中の初心者です。
2
2
  以下のように項目を縦2列で表示したいです。※左右の比率は50%ずつ
3
+
3
- [画像イメージ](https://screenshot.net/jp/p9dvxbv)
4
+ <img src="https://i.imgur.com/Nu9Dy4Y.png">
5
+
4
6
  いろいろと試行錯誤していますが、<div class="tab-content">の中を分断するからか上手く表示されません。
5
7
  どのようにcssを変えればよいのでしょうか。
6
8
  そもそも<div class="tab-content">ではできないのでしょうか。

2

書式の修正

2018/09/06 03:20

投稿

rice_medicine
rice_medicine

スコア15

title CHANGED
File without changes
body CHANGED
@@ -23,66 +23,62 @@
23
23
  <body>
24
24
 
25
25
  <form method="post" action="">
26
- <h3>会員コードを入力してください</h3>
26
+ <h3>会員コードを入力してください</h3>
27
- <input type="text" name="jacode" placeholder="例:111111111" maxlength="8">
27
+ <input type="text" name="jacode" placeholder="例:111111111" maxlength="8">
28
28
 
29
- <h3>本日の日付を入力してください</h3>
29
+ <h3>本日の日付を入力してください</h3>
30
- <input type="text" name="day" placeholder="例:20181001" maxlength="8">
30
+ <input type="text" name="day" placeholder="例:20181001" maxlength="8">
31
31
 
32
32
 
33
33
  <h3>今回のイベントは</h3>
34
- <div class="tab-content">
34
+ <div class="tab-content">
35
- <input type="radio" id="tab1" name="tab" checked>
35
+ <input type="radio" id="tab1" name="tab" checked>
36
- <label for="tab1">楽しかった</label>
36
+ <label for="tab1">楽しかった</label>
37
- <input type="radio" id="tab2" name="tab">
37
+ <input type="radio" id="tab2" name="tab">
38
- <label for="tab2">楽しくなかった</label>
38
+ <label for="tab2">楽しくなかった</label>
39
39
 
40
- <h3>その理由は</h3>
40
+ <h3>その理由は</h3>
41
- <div class="tab-box">
41
+ <div class="tab-box">
42
- <div class="tabView1"><select name="version">
42
+ <div class="tabView1"><select name="reason">
43
- <option value="A">A</option>
43
+ <option value="A">A</option>
44
- <option value="B">B</option>
44
+ <option value="B">B</option>
45
- <option value="C">C</option>
45
+ <option value="C">C</option>
46
46
     </select>
47
- </div>
47
+ </div>
48
- <div class="tabView2"><select name="version">
48
+ <div class="tabView2"><select name="reason">
49
- <option value="X">X</option>
49
+ <option value="X">X</option>
50
- <option value="Y>Y</option>
50
+ <option value="Y">Y</option>
51
- <option value="Z">Z</option>
51
+ <option value="Z">Z</option>
52
- </select>
52
+ </select>
53
- </div>
53
+ </div>
54
- <h3>満足度はどのくらいか</h3>
54
+ <h3>満足度はどのくらいか</h3>
55
- <div class="tabView1"><select name="fix">
55
+ <div class="tabView1"><select name="happy">
56
- <option value="100">100</option>
56
+ <option value="100">100</option>
57
- <option value="80">80</option>
57
+ <option value="80">80</option>
58
- <option value="60">60</option>
58
+ <option value="60">60</option
59
- </select>
59
+ </select>
60
+ </div>
61
+ <div class="tabView2"><select name="happy">
62
+ <option value="40">40</option>
63
+ <option value="20">20</option>
64
+ <option value="0">0</option>
65
+ </select>
66
+ </div>
67
+ <h3>全体への評価</h3>
68
+ <div class="tabView1"><input type="radio" name="result" value="大成功">大成功
69
+ <input type="radio" name="result" value="成功">成功
70
+ <input type="radio" name="result" value="成功~普通">成功~普通
71
+ </div>
72
+ <div class="tabView2"><input type="radio" name="result" value="普通~失敗">普通~失敗
73
+ <input type="radio" name="result" value="失敗">失敗
74
+ <input type="radio" name="result" value="大失敗">大失敗
75
+ </div>
76
+ </div>
77
+ </div>
60
78
 
61
- </div>
62
- <div class="tabView2"><select name="fix">
63
- <option value="40">40</option>
64
- <option value="20">20</option>
65
- <option value="0">0</option>
66
- </select>
67
- </div>
68
- <h3>全体への評価</h3>
69
- <div class="tabView1"><input type="radio" name="result" value="大成功">大成功
70
- <input type="radio" name="result" value="成功">成功
71
- <input type="radio" name="result" value="成功~普通">成功~普通
79
+ <button type='submit' name='action' value='提出'>提出</button>
72
- </div>
73
- <div class="tabView2"><input type="radio" name="result" value="普通~失敗">普通~失敗
74
- <input type="radio" name="result" value="失敗">失敗
75
- <input type="radio" name="result" value="大失敗">大失敗
80
+ <button type='reset' name='action' value='クリア'>クリア</button>
76
81
 
77
- </div>
78
- </div>
79
- </div>
80
-
81
- <button type='submit' name='action' value='提出'>提出</button>
82
- <button type='reset' name='action' value='クリア'>クリア</button>
83
-
84
-
85
-
86
82
  </body>
87
83
  </html>
88
84
  ```

1

説明の追加

2018/09/06 03:06

投稿

rice_medicine
rice_medicine

スコア15

title CHANGED
File without changes
body CHANGED
@@ -1,11 +1,13 @@
1
1
  HTMLとCSSを勉強中の初心者です。
2
- 以下のように項目を縦2列で表示したいです。
2
+ 以下のように項目を縦2列で表示したいです。※左右の比率は50%ずつ
3
3
  [画像イメージ](https://screenshot.net/jp/p9dvxbv)
4
4
  いろいろと試行錯誤していますが、<div class="tab-content">の中を分断するからか上手く表示されません。
5
5
  どのようにcssを変えればよいのでしょうか。
6
6
  そもそも<div class="tab-content">ではできないのでしょうか。
7
7
  どなたかご教示をお願いします。
8
8
 
9
+
10
+
9
11
  ```HTML
10
12
  <!--
11
13
  <%@ page language="java" contentType="text/html; charset=windows-31j"