如何對齊動態輸入字段？

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標籤，但沒有奏效。

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> 

這裏是上述