teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問cssで縦並びにしたい

編集履歴

回答編集履歴

4

より最適な解にするためにコードを大幅変更

2017/09/06 03:43

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- ###追記
33
+ ###追記(9/6(水)12:30頃、大幅変更)
34
34
 
35
35
 
36
36
 
@@ -38,25 +38,9 @@
38
38
 
39
39
 
40
40
 
41
- display: -webkit-box;は絶対に必要なんでしょうか？
41
+ display: -webkit-box;は#aではなく、その親要素に適用させて下さい。
42
42
 
43
- 必要ないならばfloatを使った方がいいような気がします。
44
-
45
- (もしこのフォームの下に何かつけるときはclearを設定して下さい。)
46
-
47
-
48
-
49
- ```lang-css
50
-
51
- #a {
52
-
53
- display: -webkit-box;
54
-
55
- }
56
-
57
- ```
58
-
59
- を使うというご希望には沿えませんでしたが、とりあえず書いてみました。
43
+ 下のコードの場合はa1、a2、…の親要素、#formsに適用させています。
60
44
 
61
45
 
62
46
 
@@ -74,9 +58,9 @@
74
58
 
75
59
  <style>
76
60
 
77
- .flt {
61
+ #forms {
78
62
 
79
- float: left;
63
+ display: -webkit-box;
80
64
 
81
65
  }
82
66
 
@@ -106,7 +90,7 @@
106
90
 
107
91
  $("#button").click(function(){
108
92
 
109
- var a = $("<div>",{id: ("a"+j),class: "flt"});
93
+ var a = $("<div>",{id: ("a"+j)});
110
94
 
111
95
  a.append($('<input type="text" value="フォーム'+(i++)+'"></input><br />'));
112
96
 
@@ -134,7 +118,7 @@
134
118
 
135
119
  <div id="forms">
136
120
 
137
- <div id="a1" class="flt"></div>
121
+ <div id="a1"></div>
138
122
 
139
123
  </div>
140
124
 
@@ -146,4 +130,6 @@
146
130
 
147
131
 
148
132
 
133
+
134
+
149
135
  (長文失礼しました。m(_ _)m)

3

誤字の修正

2017/09/06 03:42

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- コメント蘭だとコードが載せられないのでこちらに追記させて下さい。
37
+ コメント欄だとコードが載せられないのでこちらに追記させて下さい。
38
38
 
39
39
 
40
40
 
@@ -56,7 +56,7 @@
56
56
 
57
57
  ```
58
58
 
59
- を使うというご希望には沿えませんでしたが、とりあえず書いて見ました。
59
+ を使うというご希望には沿えませんでしたが、とりあえず書いてみました。
60
60
 
61
61
 
62
62
 

2

要素の名前を質問に合わせ変更

2017/09/05 17:56

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -74,12 +74,6 @@
74
74
 
75
75
  <style>
76
76
 
77
- #a{
78
-
79
- // display: -webkit-box;
80
-
81
- }
82
-
83
77
  .flt {
84
78
 
85
79
  float: left;
@@ -94,35 +88,37 @@
94
88
 
95
89
  var i = 1;
96
90
 
97
- var j = 2;
91
+ var j = 1;
98
92
 
99
93
 
100
94
 
101
95
  window.onload = function(){
102
96
 
103
- $('<input type="text" value="フォーム'+(i++)+'"></input><br />').appendTo("#div1");
97
+ $('<input type="text" value="フォーム'+(i++)+'"></input><br />').appendTo("#a"+j);
104
98
 
105
- $('<input type="text" value="フォーム'+(i++)+'"></input><br />').appendTo("#div1");
99
+ $('<input type="text" value="フォーム'+(i++)+'"></input><br />').appendTo("#a"+j);
106
100
 
107
- $('<input type="text" value="フォーム'+(i++)+'"></input><br />').appendTo("#div1");
101
+ $('<input type="text" value="フォーム'+(i++)+'"></input><br />').appendTo("#a"+j);
102
+
103
+ j++;
108
104
 
109
105
 
110
106
 
111
- $("#button").click(function(){
107
+ $("#button").click(function(){
112
108
 
113
- var div = $("<div>",{id: ("div"+j),class: "flt"});
109
+ var a = $("<div>",{id: ("a"+j),class: "flt"});
114
110
 
115
- div.append($('<input type="text" value="フォーム'+(i++)+'"></input><br />'));
111
+ a.append($('<input type="text" value="フォーム'+(i++)+'"></input><br />'));
116
112
 
117
- div.append($('<input type="text" value="フォーム'+(i++)+'"></input><br />'));
113
+ a.append($('<input type="text" value="フォーム'+(i++)+'"></input><br />'));
118
114
 
119
- div.append($('<input type="text" value="フォーム'+(i++)+'"></input>'));
115
+ a.append($('<input type="text" value="フォーム'+(i++)+'"></input>'));
120
116
 
121
- $("#a").append(div);
117
+ $("#forms").append(a);
122
118
 
123
119
  j++;
124
120
 
125
- });
121
+ });
126
122
 
127
123
  }
128
124
 
@@ -136,9 +132,9 @@
136
132
 
137
133
  <br />
138
134
 
139
- <div id="a">
135
+ <div id="forms">
140
136
 
141
- <div id="div1" class="flt"></div>
137
+ <div id="a1" class="flt"></div>
142
138
 
143
139
  </div>
144
140
 

1

質問の追記に対し追記しました。

2017/09/05 04:13

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -27,3 +27,127 @@
27
27
 
28
28
 
29
29
  ![image](1bb997febbecfb29604fcf167a5a7a6b.png)
30
+
31
+
32
+
33
+ ###追記
34
+
35
+
36
+
37
+ コメント蘭だとコードが載せられないのでこちらに追記させて下さい。
38
+
39
+
40
+
41
+ display: -webkit-box;は絶対に必要なんでしょうか？
42
+
43
+ 必要ないならばfloatを使った方がいいような気がします。
44
+
45
+ (もしこのフォームの下に何かつけるときはclearを設定して下さい。)
46
+
47
+
48
+
49
+ ```lang-css
50
+
51
+ #a {
52
+
53
+ display: -webkit-box;
54
+
55
+ }
56
+
57
+ ```
58
+
59
+ を使うというご希望には沿えませんでしたが、とりあえず書いて見ました。
60
+
61
+
62
+
63
+ ```lang-html
64
+
65
+ <!doctype html>
66
+
67
+ <html>
68
+
69
+ <head>
70
+
71
+ <meta charset="utf-8">
72
+
73
+ <title>縦3列のフォームを横並びに連ねてみた</title>
74
+
75
+ <style>
76
+
77
+ #a{
78
+
79
+ // display: -webkit-box;
80
+
81
+ }
82
+
83
+ .flt {
84
+
85
+ float: left;
86
+
87
+ }
88
+
89
+ </style>
90
+
91
+ <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
92
+
93
+ <script>
94
+
95
+ var i = 1;
96
+
97
+ var j = 2;
98
+
99
+
100
+
101
+ window.onload = function(){
102
+
103
+ $('<input type="text" value="フォーム'+(i++)+'"></input><br />').appendTo("#div1");
104
+
105
+ $('<input type="text" value="フォーム'+(i++)+'"></input><br />').appendTo("#div1");
106
+
107
+ $('<input type="text" value="フォーム'+(i++)+'"></input><br />').appendTo("#div1");
108
+
109
+
110
+
111
+ $("#button").click(function(){
112
+
113
+ var div = $("<div>",{id: ("div"+j),class: "flt"});
114
+
115
+ div.append($('<input type="text" value="フォーム'+(i++)+'"></input><br />'));
116
+
117
+ div.append($('<input type="text" value="フォーム'+(i++)+'"></input><br />'));
118
+
119
+ div.append($('<input type="text" value="フォーム'+(i++)+'"></input>'));
120
+
121
+ $("#a").append(div);
122
+
123
+ j++;
124
+
125
+ });
126
+
127
+ }
128
+
129
+ </script>
130
+
131
+ </head>
132
+
133
+ <body>
134
+
135
+ <button id="button">フォーム増やす</button>
136
+
137
+ <br />
138
+
139
+ <div id="a">
140
+
141
+ <div id="div1" class="flt"></div>
142
+
143
+ </div>
144
+
145
+ </body>
146
+
147
+ </html>
148
+
149
+ ```
150
+
151
+
152
+
153
+ (長文失礼しました。m(_ _)m)