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's fiddle 的此更新，其中我限制了大小以防止对内联元素进行新的换行，并且在此我禁用了换行。

如评论所述，您可以将display: inlineas CSS放置得更整洁。

于 2013-06-07T18:57:41.087 回答
1

只需将 div 显示设置为inline-block（如果较旧的浏览器有问题，则使用浮点数）：

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 回答
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 或上面代码的第二行中看到这一点。jQuery 命令是.css("margin", "0 auto")或.css({ margin: "0 auto" })

于 2013-06-07T19:13:09.703 回答