最后一个文本框在很远的地方

Question

我一直在用基金会做一个大表单。在最后一行文本框中，最后一个文本框远离右侧，而不是位于第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 (如手册中所用))。考虑一下这个例子：

<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>

样品填充