我有一个通过调用 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>
最佳答案
这可以通过 display flex 来完成。
.wrapper {
display: flex;
}
.column {
flex: 0 0 33%; // column does not grow or shrink. but takes up 33% of the space
}
关于php - css - 居中 3 列布局 <ul>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49486939/