如何對齊動態輸入字段？

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