水平組織div

Question

我的網址： illandeistudio

如果您向下滾動一半，您將看到一個類別列表（附件，餐廳，照明設備...）

他們目前是垂直的。 如何使它們水平顯示？ 最佳情況下，它們將為每行4個。 下面是將所有“類別”放入div“內森”的PHP代碼

謝謝！ 這真是地獄！

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

高個子男孩怎么說。 :)您可能還需要為.nelson div設置寬度，以使其正確浮動並對齊。