Zurb Foundation 4：如何使用块网格分发pre / postfix字段组？

Question

我正在动态创建具有未知数量的语义相关文本字段的表单，这些字段必须共享一行（在Foundation's意义上的单词）并在其中均匀分布。 blockgrid类似乎是更好的选择，但我不能让前后修复类在其中工作。

注意：这不是我的实际代码，而是提高社区效用的问题的一般形式

<ul class="large-block-grid-<? echo count($choices);?> row"> <!-- $choices = array of fields--> 
    <h6><span data-tooltip class="has-tip" title="">TooltipText</span></h6>
    <li class="row collapse">
        <div class="small-9 columns">
            <label for="inputA">
                <input type="text" id="inputA" name="inputA" placeholder="val" />
            </label>
        </div>
         <div class="small-3 columns">
            <span class="postfix radius">PostFix Label A</span>
        </div>
    </li>
    <li class="row collapse">
        <div class="small-9 columns">
            <label for="inputB">
                <input type="text" id="inputB" name="inputB" placeholder="val" />
            </label>
        </div>
        <div class="small-3 columns">
            <span class="postfix radius">PostFix Label B</span>
        </div>
    </li>
</ul>

我最终会得到比相应字段更高的postifix，以及左边距/填充的问题（参见屏幕截图）。任何人吗？

Answer 1

最终，我发现了我的问题。首先解释解决方案，然后是（略微）改进的代码：

1）<ul>元素在Zurb的意义上不是一行，并且应用“行”类会增加边距;它应该是 in 一个。

2）左对齐被打破，因为块网格应该嵌套在通常的网格内;添加带有n列类的包裹<div>来修复它。

3）如果<input>标签要与后缀配对，则无法将<label>包裹起来（这是导致后缀<span>高度问题的原因;可能只是我不能将block-level元素嵌套在与其配对的<span>元素不同的级别中;我刚刚删除了<label>元素并且很高兴能够解决问题）。

代码：

<!-- note that I've now wrapped everything in a column-classed div -->
<div class='large-12 columns'>
<ul class='large-block-grid-*'> <!-- * = php's count on an array of fields--> 
    <h6><span data-tooltip class='has-tip' title="">TooltipText</span></h6>
    <li class='row collapse'>
        <div class="small-9 columns">
            <input type='text' id='inputA' name='inputA' placeholder='val' />
        </div>
         <div class="small-3 columns">
            <span class='postfix radius'>PostFix Label A</span>
        </div>
    </li>
    <li class='row collapse'>
        <div class="small-9 columns">
                <input type='text' id='inputB' name='inputB' placeholder='val' />
        </div>
        <div class="small-3 columns">
            <span class='postfix radius'>PostFix Label B</span>
        </div>
    </li>
</ul>
</div>