1

我正在动态创建表单，这些表单将具有未知数量的语义相关文本字段，这些文本字段必须共享一行（在Foundation 的意义上）并在其中均匀分布。blockgrid 类似乎是更好的选择，但我无法让 pre 和 post fix 类在其中工作。

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

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

我最终得到的后缀比其相应的字段高，并且左边距/填充有问题（请参阅屏幕截图）。任何人？

我的问题的屏幕截图

4

1 回答 1

0

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

1)<ul>元素不是 Zurb 意义上的行，并且应用“行”类会占用边距；它应该合二为一。

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

<input>3）如果要与后缀配对，则无法包装<label>标签（这就是导致后缀高度问题的原因<span>；可能只是我不能将字段嵌套在不同的块级元素中水平比<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>
于 2013-07-02T16:13:57.263 回答