Question

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

looky here

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

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

Answer 2

我为你创建了一个codepen ...

一种可能的解决方案是将每个输入包装在div中，这样可以更好地控制布局。通过为div设置固定宽度将确保每个显示相同，较长的标签包装到第二行而不是推出对齐。

<div class="center">
    <div class="column">
        <div class="col"><input /><label/></div>
    </div>
</div>

希望这会有所帮助。

Answer 3

试试这个

{foreach key=num item=listtld from=$tldslist}
  <div class="column">
      <input type="checkbox" name="tlds[]" value="{$listtld}"{if in_array($listtld,$tlds)} checked{/if} style="float:left !important"/>
      {$listtld}
      {if $num % 5 == 0}
      {/if}
  </div>
{/foreach}



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 */
    text-align:center;
}

3列css显示不正确的问题

3 个答案: