如何对齐动态输入字段？

Question

我正在创建输入字段，并且希望每次for循环启动时它们都向左对齐。 我该如何实现？

的HTML

<form name="myform1">
    <select id="polja2"  onchange="Gen()">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</form>

<form name="myform">
    <select id="polja"  onchange="Gen()">
        <option ></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>   
    </select>     
</form>

<form>   
    <div id="t">        
    </div>
    <input type="button" value="Unesite vrijednosti" onclick="korekcija(this.form)">
</form>

的JavaScript

function Gen()
    {     
    var val = document.getElementById("polja");
    val=(val.options[val.selectedIndex].value);     
    var valGrup = document.getElementById("polja2");
    valGrup=(valGrup.options[valGrup.selectedIndex].value);
    var i;
    var j;
    var e = document.getElementById("t");
    var randomColor;
        for(i=0;i<valGrup;i++) {
            randomColor="#"+(Math.random()*0xFFFFFF<<0).toString(16);
            generate(e, i,randomColor,j,val);    
        }

    }

function generate(e, i,randomColor,j,val) { 
    e.innerHTML += "Grupa: "+i+"<br>";
    e.innerHTML += "<input type='color' name ='color1' value='"+randomColor+"' id='color"+i+"'/>"+"<br>" ;
    e.innerHTML += "<input type='text'  id='naziv" +i+"'/>"+"<br>";         

    for(j=0;j<val;j++) {
        e.innerHTML += "<input type='number' id='inputpolja"+i+j+"'/>"+"<br>";
    }
}

我尝试在div标签的左侧添加align，但是没有用。

Answer 1

试试这个应该没问题，我刚刚添加了包括CSS在内的一些内容。

<style>
    .inline{
        display:inline-block;
        float:left;
    }

    .clear{
        clear:both;
    }
</style>

<form name="myform1">
    <select id="polja2"  onchange="Gen()">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</form>

<form name="myform">
    <select id="polja"  onchange="Gen()">
        <option ></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>   
    </select>     
</form>

<form>   
    <div id="t">        
    </div>
    <div class="clear"></div>
    <input type="button" value="Unesite vrijednosti" onclick="korekcija(this.form)">
</form>
    <script>
        function Gen()
    {     
    var val = document.getElementById("polja");
    val=(val.options[val.selectedIndex].value);     
    var valGrup = document.getElementById("polja2");
    valGrup=(valGrup.options[valGrup.selectedIndex].value);
    var i;
    var j;
    var e = document.getElementById("t");
    var randomColor;
        for(i=0;i<valGrup;i++) {
            randomColor="#"+(Math.random()*0xFFFFFF<<0).toString(16);
            generate(e, i,randomColor,j,val);    
        }

    }

function generate(e, i,randomColor,j,val) { 
    e.innerHTML += "<div class='clear'></div>";
    e.innerHTML += "Grupa: "+i+ "<br>";
    e.innerHTML += "<input type='color' class='inline' name ='color1' value='"+randomColor+"' id='color"+i+"'/>";
    e.innerHTML += "<input type='text' class='inline' id='naziv" +i+"'/>";         

    for(j=0;j<val;j++) {
        if(j >= val){
            e.innerHTML += "<div class='clear'></div>"; 
        } else  {     
            e.innerHTML += "<input type='number' class'inline' id='inputpolja"+i+j+"'/>";
        }
    }       
}
</script>

这是上面修改后的代码的全屏JSFIDDLE