cssで縦並びにしたい

$('<div><input readonly type="text" value='+key+' /></div>').appendTo("#a");
        $('<div id="num'+key+'"><input id="input'+key+'" readonly type="text" size="3"/></div>').appendTo("#a");
        $('<div id="slider'+key+'" style="height:300px"/></div>').appendTo("#a");

今，全て横並びに表示されるこれらを縦並びしたいのですが，cssでどのように書けばよいのでしょうか．

#a{
  display: -webkit-box;
}

現在指定しているcssです．
このcssを指定しなければ3つの要素は縦並びになるのですが，3つの要素は縦並びで3つの要素をaとしてまとめたものは横並びにしたいということです．わかりにくくてすみません．

kei344

2017/09/02 04:59

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、現在指定している他のCSSも提示ください。

kei344

2017/09/04 22:00

スクリプトの実行結果として出来上がる予定のHTMLを提示ください。

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

回答2件

divタグにたいしてどのようなcssが指定されているかわからないですが、display:block;を追加すれば大丈夫だと思います

投稿2017/09/02 10:01

Higemura

総合スコア274

ベストアンサー

もとから縦並びになるように見受けられるのですが、

横並びに表示されるというのは?
その辺りを詳しく書いていただけるとありがたいです。

(もしくは私が質問の意味をわかってないだけ?もしそうならすみません。。)

<br />を入れて改行するというのではダメなのでしょうか?

画像はkeyの値を"key"にして該当部分だけを表示したものです。
(sliderにはあとからスライダーをいれるのでしょうか?)

もし「縦並びを横並びに」するなら、<div>じゃなくて<span>を使えばいいと思います。

###追記(9/6(水)12:30頃、大幅変更)

コメント欄だとコードが載せられないのでこちらに追記させて下さい。

display: -webkit-box;は#aではなく、その親要素に適用させて下さい。
下のコードの場合はa1、a2、…の親要素、#formsに適用させています。

lang
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>縦3列のフォームを横並びに連ねてみた</title>
6<style>
7#forms {
8   display: -webkit-box;
9}
10</style>
11<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
12<script>
13var i = 1;
14var j = 1;
15
16window.onload = function(){
17    $('<input type="text" value="フォーム'+(i++)+'"></input><br />').appendTo("#a"+j);
18    $('<input type="text" value="フォーム'+(i++)+'"></input><br />').appendTo("#a"+j);
19    $('<input type="text" value="フォーム'+(i++)+'"></input><br />').appendTo("#a"+j);
20    j++;
21
22    $("#button").click(function(){
23      var a = $("<div>",{id: ("a"+j)});
24      a.append($('<input type="text" value="フォーム'+(i++)+'"></input><br />'));
25      a.append($('<input type="text" value="フォーム'+(i++)+'"></input><br />'));
26      a.append($('<input type="text" value="フォーム'+(i++)+'"></input>'));
27      $("#forms").append(a);
28      j++;
29    });
30}
31</script>
32</head>
33<body>
34<button id="button">フォーム増やす</button>
35<br />
36<div id="forms">
37<div id="a1"></div>
38</div>
39</body>
40</html>