水平组织div

Question

我的网址：illandeistudio

如果您向下滚动一半，您将看到一个类别列表（附件，餐厅，灯光......）

他们目前是垂直的。如何让它们水平显示？最理想的是它们每行4个。下面是PHP代码，它将所有“类别”放入div“nelson”

谢谢！这一直都是地狱！

Answer 1

.nelson {
     float: left;
     padding: 0 3px;
}

然后从那里设置填充样式。你可以替换填充：0 3px;宽度：80px;如果你希望列是均匀的（可能看起来更好），可以从那里调整它。

如果你想让它以4列为中心（你有7个项目，那么它将是4列，2行，最后一列只有1行）....不确定为什么你会想要它但它可能。您可以创建一个围绕您编写的代码，创建宽度并添加属性：

style="margin: 0 auto; width: 916px;"

然后你将它的宽度调整为7 *宽度.nelson

的乘积

我建议只调整填充，然后让菜单水平移动。所有7件物品一直贯穿其中。

Answer 2

使用像：

<?php if (count($this->document->shoppica_categories_arr) > 0) : ?>
   <ul id="categories">
   <?php $i = 0; ?>
   <?php foreach ($this->document->shoppica_categories_arr as $category): ?>
       <?php $i++ ?>
       <li <?php if ($i % 4 == 0) : ?> class="ln"<?php endif ?>><?php echo $category->getName() ?></li>
   <?php endforeach ?>
   </ul>
<?php endif ?>

css文件：

ul#categories li {
   float: left;
}
ul#categories li.ln {
   clear: left;
}

Answer 3

Tallboy说的话。 :)您可能还需要为.nelson div设置一个宽度，以使它们正确浮动并排队。