有关动态创建输入的问题

Question

我使用JavaScript创建动态输入。但我无法处理输入宽度问题。输入的创建取决于用户的选择。 （像4行和6列）我有一个div中心页面。我想要的是：无论创建多少列，都必须在该div中修复宽度。我的意思是，如果每列有4列和width:50px，则创建5列时必须为40px。

Here is the same problem，但它对我不起作用。

这是我的代码：

＆＃13;

＆＃13;

function HideHider() {
    var hider = document.getElementById("hiderPanel");
    var satir = document.getElementById("satir").value;
    var sutun = document.getElementById("sutun").value;
    var area = document.getElementById("inputArea");
    var w = 100 / sutun;

    for (i = 0; i < satir; i++) {
        var newdiv = document.createElement("div");
        newdiv.setAttribute("class", "satirdiv");
        newdiv.setAttribute("id", "satir" + i + 1);
        area.appendChild(newdiv);
    }

    for (i = 0; i < satir; i++) {
        for (j = 0; j < sutun; j++) {
            var newinput = document.createElement("input");
            var gecici = document.getElementById("satir" + i + 1);
            newinput.type = "text";
            newinput.setAttribute("id", "input" + (satir + 1) + "_" + (sutun + 1));
            gecici.appendChild(newinput);
        }
    }

    hider.style.display = 'none';
}

＆＃13;

.hider
{
    display:block;
    position:fixed;
    top:0;
    left:0;    
    height:100%;
    width:100%;
    z-index:15;     
    background: rgba(64, 64, 64, 0.5);
    opacity:0.9;
}

.inputpanel
{
    margin-left:auto; 
    margin-right:auto; 
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); 
    background-color: #F7F7F7;    
    padding:40px; 
    width:300px; 
    height:350px;
}

.btndiv
{
    margin-top:30%; height:40px;
}

.btndiv button
{
    text-align:center; 
    color:white; 
    width:100%; 
    height:100%; 
    background-color:#008CBA; 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); 
    border-radius: 8px;
}

.satirdiv
{  
    display:table;
    width:100%;    
}

.satirdiv input
{
    display:table-cell;
    width:auto;
}

＆＃13;

<div id="hiderPanel" class="hider">
    <div class="inputpanel">
        <div style="float:left; margin-top:3%; width:100%;">
            <label style="float:left; width:30%;">Satir Sayisi:</label>
            <input type="number" id="satir" />
        </div>
        <div style="float:left; margin-top:3%; width:100%;">
            <label style="float:left; width:30%;">Sutun Sayisi:</label>
            <input type="number" id="sutun" />
        </div>
        <div class="btndiv">
            <button onclick="HideHider()">Devam</button>
        </div>
    </div>
</div>

<div id="inputArea" style="margin-left:auto; margin-top:10%; margin-right:auto; width:50%; background-color:red;">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我已经解决了这个问题。我为输入创建了div。并给他们显示：table-cell;感谢大家。