如何使用javascript或jquery在一行中显示10000个div？ [复制]答案

【问题标题】：How to display 10000 div in one line using javascript or jquery? [duplicate]如何使用javascript或jquery在一行中显示10000个div？ [复制]
【发布时间】：2020-07-13 20:25:08
【问题描述】：

如何使用javascript或jquery在一行中显示10000个div？我想在一行中显示10000个div而不换行。

 (function callBox() {
        "use strict";
        var i, j, mainCube, a, div, elements;
        elements = document.querySelectorAll(".mainCube");
        mainCube = [];
        for (i = 0; i < elements.length; i++) {
            mainCube[i] = a = [];
            for (j = 0; j < 10000; j++) {
                // Create this div
                mainCube[i][j] = div = document.createElement('div');

                // Add class and such to div
                div.className = "letterPix";

                // Append it to the mainCubeClass element
                elements[i].appendChild(div);
            }
        }
        })();

.mainCube {
        border: 2px solid rgb(204, 31, 0);
        }

        .letterPix {
        border: 1px solid rgb(15, 14, 14);
        width: 100px;
        height: 100px;
        display: inline-block;
        }

&lt;div class="mainCube"&gt;&lt;/div&gt;

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

简单地将white-space:nowrap; 添加到主立方体类

(function callBox() {
        "use strict";
        var i, j, mainCube, a, div, elements;
        elements = document.querySelectorAll(".mainCube");
        mainCube = [];
        for (i = 0; i < elements.length; i++) {
            mainCube[i] = a = [];
            for (j = 0; j < 10000; j++) {
                // Create this div
                mainCube[i][j] = div = document.createElement('div');

                // Add class and such to div
                div.className = "letterPix";

                // Append it to the mainCubeClass element
                elements[i].appendChild(div);
            }
        }
        })();

.mainCube {
        border: 2px solid rgb(204, 31, 0);
        white-space:nowrap;
        overflow-y:auto;
        }

        .letterPix {
        border: 1px solid rgb(15, 14, 14);
        width: 100px;
        height: 100px;
        display: inline-block;
        }

&lt;div class="mainCube"&gt;&lt;/div&gt;

我为样式添加了溢出但不是必需的

【讨论】：