html - 3 列 css 显示不正确的问题

Question

有点问题，我有一个 3 列显示文本和复选框，但是它在页面中正确居中，但框和文本居中

我希望内容在页面中居中，但希望文本和复选框正确垂直对齐。请帮忙，谢谢!

html

<div class="center">
{foreach key=num item=listtld from=$tldslist}
  <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: 30%;                     /* 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 */
}

Answer 1

试试这个:http://jsfiddle.net/techsin/6cs47/

这非常简单，您所要做的就是摆脱所有旧样式并使用 html5 的这一新列功能。

.con {
    border:1px solid;
    -webkit-column-count:3;
}