php - css - 居中 3 列布局

Question

我有一个通过调用 API 生成的列表 - 每个页面的列表限制为 30 个，每列应该有 10 个列表。

目前它看起来并不居中，尤其是在大屏幕上。我试过 margin: 0 auto 但没有任何效果。我可以手动完成我所做的，但该解决方案对于更大的屏幕是可行的，并确保它们是响应式的(变成 2 列，然后在移动设备上变成 1 列)。我该如何解决这个问题？

CSS:

#native {

 width: 100%;
 margin: auto;
 padding: 0;
 position: relative;
 left: 2%;
}

#native ul {
 list-style: none;
 display: inline-block;
 padding-right: 65px;
}


@media(max-width: 480px){
#native {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
   }
}

@media(max-width: 768px){
#native {
    left: 0;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
   }
}


 @media (min-width: 1600px)
 {
   #native {

    max-width: 1600px;

   }
   #native ul {

    padding-right: 150px;

   }
}

html/php:

<div id="native" class="margin-top-2x">  
    <ul>
        <?php 
           $i=1;
           foreach ( $model as $d ) { ?>
        <?php if ( !empty ( $d['id'] ) ): ?>
            <li>

                    <a href="<?php echo $this->createUrl ( 'frontend/detailedView' , array( 'id' => $d['id'] ) ) ?>"><?php echo ysUtil::truncate($d['title'], 45) ?></a>

                <br>
            </li>
            <?php endif; ?>
            <?php
            if ( ($i % 10) == 0 ) {
                echo "</ul>";
                echo (end ( $model['id'] ) == $d['id']) ? "" : "<ul>";
            }
            $i++;
            ?>
        <?php } ?>
</div>

Answer 1

这可以通过 display flex 来完成。

.wrapper {
    display: flex;
}
.column {
    flex: 0 0 33%; // column does not grow or shrink. but takes up 33% of the space
}