0

このコードを使用して、テーブルにセルを作成しています...

var cell = row.insertCell(i);
cell.contentEditable = true;
var element = document.createElement("div");
var image= document.createElement("img");
image.src = "pics/grey-button.png";
element.type = "text";
element.className = "boxes";
element.id = tableID+n+""+i;
element.contentEditable = true;
cell.appendChild(element);
cell.appendChild(image);

しかし、各セルで の下に画像<div>を取得しますが、それらを同じ行に配置するにはどうすればよいですか?

ありがとう！

4

3 に答える 3

2

デフォルトでは、a<div>はインライン要素ではなくブロック要素です。インラインでレンダリングする場合は、ブラウザにインライン要素として表示するように指示する必要があります。<div>

element.style.display = 'inline'; // or 'inline-block'

それでも新しい行に折り返されている場合は、サイズの制限が原因です (たとえば、セルがこれ以上大きくならない、または<div>が大きくなり、 のためのスペースが残されません<img>)。
これを修正する別の方法は、 を設定whitespace: nowrap;してラッピングを無効にすることです。

mishik の fiddle のこの更新を参照してください。インライン要素の改行を防ぐためにサイズを制限し、これでは折り返しを無効にしました。

コメントされているように、display: inlineas CSSをよりきれいにすることができます。

于 2013-06-07T18:57:41.087 に答える
1

マークしたので、jQueryを使用するだけでこれをはるかに簡単に行うことができます。jQueryでは、あなたが持っているものの正確なプロセスは次のようになります:(多くの方法があります)

var cell = $("<td />").appendTo($("table tr:last")), // this append to statement, you would change the selector to select your row
    div = $("<div />", { id: tableID+n+""+i, class: "boxes", contenteditable: true, type: "text" }).css("margin", "0 auto").appendTo(cell),
    img = $("<img />", { src: "pics/grey-button.png" }).prependTo(div);

さらにいくつかのオプションと別の jQuery メソッドを使用した実際の例を参照してください

ここ！

センタリングの問題について。提案どおりに実行して を使用することもできますがinline、それによりさらに問題が発生する可能性があります。div のマージンを設定するだけで準備完了0 autoです。これは、私のフィドルの例の CSS、または上記のコードの 2 行目に表示されます。jQuery コマンドは.css("margin", "0 auto")、または.css({ margin: "0 auto" })

于 2013-06-07T19:13:09.703 に答える
1

div 表示を次のように設定するだけです(または、古いブラウザーが問題になるinline-block場合は float を使用します)。

var cell = row.insertCell(i);
cell.contentEditable = true;
var element = document.createElement("div");
var image= document.createElement("img");
image.src = "pics/grey-button.png";
element.type = "text";
element.className = "boxes";
element.id = tableID+n+""+i;
element.style.display = 'inline-block';
element.contentEditable = true;
cell.appendChild(element);
cell.appendChild(image);

フィドル

于 2013-06-07T18:57:43.487 に答える