Question

我该怎么做：

<div>
 <p class="center">
    {foreach key=num item=listtld from=$tldslist}
      <div class="{if ($num+1) % 3 == 1}column-left{elseif ($num+1) % 3 == 2}column-center{elseif ($num+1) % 3 == 0}column-right{/if}">
          <input type="checkbox" name="tlds[]" value="{$listtld}"{if in_array($listtld,$tlds)} checked{/if}>
          {$listtld}
          {if $num % 5 == 0}
          {/if}
      </div>
   {/foreach}
</p>

.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }

并将其列为6列？谢谢，我真的很陌生。

Answer 1

重新修改你的html以清理它：

<div class="center">
    <!-- Removed the <p> tag - it contains <div> elements, which don't belong within <p> elements -->
    {foreach key=num item=listtld from=$tldslist}
      <!-- Removed the class if / else conditions.  Simplify to one class - column -->
      <div class="column">
          <input type="checkbox" name="tlds[]" value="{$listtld}"{if in_array($listtld,$tlds)} checked{/if}>
          {$listtld}
          {if $num % 5 == 0}
          {/if}
      </div>
   {/foreach}
</div>

注意，我也简化了你的课程。没有必要实现你想要的。简单就更好了！

CSS：

div.column {
    width: 16%;                     /* approximately 1/6 */
    display: inline-block;
    zoom: 1;                        /* ie-7 hack for inline block to work */
    *display: inline;               /* ie-7 hack for inline-block to work */
    border: 1px solid red;          /* temporary - to clearly show the box */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* to prevent padding issues if you add padding */
    margin: 0;                      /* to ensure the right width */
    vertical-align: top;            /* to line them up evenly across the top */
}

小提琴：http://jsfiddle.net/N39VM/

Answer 2

这是使用浮动的解决方案。

对于CSS：

div.column {
    width: 16.66666666666666666666%;
    float: left;
    border: 1px dotted gray;        /* temporary - to clearly show the box */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box; 
}

，HTML看起来像：

<div>
    <div class="column"><input type="checkbox" name="tlds[]" value="1" />Label Text</div>
    <div class="column"><input type="checkbox" name="tlds[]" value="1" />Label Text</div>
    <div class="column"><input type="checkbox" name="tlds[]" value="1" />Label Text</div>
    <div class="column"><input type="checkbox" name="tlds[]" value="1" />Label Text</div>
    <div class="column"><input type="checkbox" name="tlds[]" value="1" />Label Text</div>
    <div class="column"><input type="checkbox" name="tlds[]" value="1" />Label Text</div>
    <div class="column"><input type="checkbox" name="tlds[]" value="1" />Label Text</div>
    <div class="column"><input type="checkbox" name="tlds[]" value="1" />Label Text</div>    
</div>

如果您有超过6个输入字段，那么第二组6个元素将从第二行开始，这可能是一个不错的选择。

如果要添加边框和填充，box-sizing属性非常有用。

width值应该足够精确，以确保列可以填满宽度。

请参阅演示：http://jsfiddle.net/audetwebdesign/WpuFL/

注意：我只是展示了CSS如何工作。你仍然需要在内部实现它模板脚本代码。

CSS 6列设置问题

2 个答案: