마지막 텍스트 상자가 멀리 떨어져 있습니다.

Question

저는 Foundation을 사용하여 커다란 폼을 작성했습니다. 텍스트 상자의 마지막 행에서 마지막 텍스트 상자는 39 번째 텍스트 상자 옆에 있지 않고 오른쪽에 있습니다. PHP를 사용하여 양식을 작성한 후 HTML 출력을 jsfiddle에 붙여 넣습니다. 어떤 아이디어?

JsFiddle : http://jsfiddle.net/7qre6/3/

PHP :

<?php 
       //$counter = 0; 
       echo "<form id='scoreI'>\n"; 
       echo "<div class='row'>\n"; 
       for($counter = 1; $counter <= 40; $counter++) 
       { 
       $boxNumber = 'box' . $counter; 
       echo "<div class='large-1 small-1 columns testBox'>\n"; 
       echo "<label>$counter."; 
       echo "<input type='text' name='$boxNumber' id='$boxNumber' /> </label>\n"; 
       echo "</div>\n"; 
       if($counter%12==0) 
       {     
        echo "</div>\n"; 
        echo "<div class='row'>\n"; 
       } 
       //if($counter == 40) {continue;} 
       } 
       echo "</div>\n"; 
       echo "</form>\n"; 
      ?> 

생성 된 HTML :

<div class='row'> 
    <div class='large-1 small-1 columns testBox'> 
     <label>1.<input id='box1' name='box1' type='text'></label> 
    </div> 

    <div class='large-1 small-1 columns testBox'> 
     <label>2.<input id='box2' name='box2' type='text'></label> 
    </div> 

    <div class='large-1 small-1 columns testBox'> 
     <label>3.<input id='box3' name='box3' type='text'></label> 
    </div> 

    <div class='large-1 small-1 columns testBox'> 
     <label>4.<input id='box4' name='box4' type='text'></label> 
    </div> 

    <div class='large-1 small-1 columns testBox'> 
     <label>5.<input id='box5' name='box5' type='text'></label> 
    </div> 

    <div class='large-1 small-1 columns testBox'> 
     <label>6.<input id='box6' name='box6' type='text'></label> 
    </div> 

    <div class='large-1 small-1 columns testBox'> 
     <label>7.<input id='box7' name='box7' type='text'></label> 
    </div> 

    <div class='large-1 small-1 columns testBox'> 
     <label>8.<input id='box8' name='box8' type='text'></label> 
    </div> 

    <div class='large-1 small-1 columns testBox'> 
     <label>9.<input id='box9' name='box9' type='text'></label> 
    </div> 

    <div class='large-1 small-1 columns testBox'> 
     <label>10.<input id='box10' name='box10' type='text'></label> 
    </div> 

    <div class='large-1 small-1 columns testBox'> 
     <label>11.<input id='box11' name='box11' type='text'></label> 
    </div> 

    <div class='large-1 small-1 columns testBox'> 
     <label>12.<input id='box12' name='box12' type='text'></label> 
    </div> 
</div> 

<!--repeat above twice--> 

<div class='row'> 
    <div class='large-1 small-1 columns testBox'> 
     <label>37.<input id='box37' name='box37' type='text'></label> 
    </div> 

    <div class='large-1 small-1 columns testBox'> 
     <label>38.<input id='box38' name='box38' type='text'></label> 
    </div> 

    <div class='large-1 small-1 columns testBox'> 
     <label>39.<input id='box39' name='box39' type='text'></label> 
    </div> 

    <div class='large-1 small-1 columns testBox'> 
     <label>40.<input id='box40' name='box40' type='text'></label> 
    </div> 
</div> 

편집 : 잘못된 링크, 내 사과를했다.

Answer 1

올바른 순서로 넣으려면. block-grid(as used in the manual을 사용하고 싶습니다.

<div class="row"> 
    <ul class="small-block-grid-12"> 
     <?php for($x = 1; $x <= 40; $x++): ?> 
      <li><?php echo "$x."; ?><input type="text" name="<?php echo 'box'.$x; ?>" id="<?php echo 'box'.$x; ?>" /></li> 
     <?php endfor; ?> 
    </ul> 
</div> 

Sample Fiddle