0

我正在用 php 生成一个看起来像图片的动态列表。它有 4 列（固定）；但行可能会有所不同。

GREEN = first column
RED = last row

我怎样才能得到绿色和红色的（用于 css 目的）？

echo '<ul>'
foreach($data as $v){
   echo '<li>$v</li>'
}
echo '</ul>'

在此处输入图像描述

解释：每个块是一个里。标记出来是这样的：

<div class="content">
  <ul>
    <li>some data</li>
    <li>some data</li>
    <li>some data</li>
    <li>some data</li>
    <li>some data</li>
    <li>some data</li>
    <li>some data</li>
    <li>some data</li>
    <li>some data</li>
  </ul>
</div>

和 CSS

.content{ border-top:solid #000 1px, border-bottom:solid #000 1px}
ul{ border-left:solid #000 1px}
li{border-bottom:solid #000 1px; border-left:solid #000 1px}
  • 第 1 列（第 1、第 5 和第 9 里）将没有左边框。
  • 最后一行（第 8 和第 9 里）将没有边框底部

我想要的是整个东西看起来像一个带有单元格的表格。我不能在这里使用表格，所以我尝试使用看起来像表格的列表。列表是动态生成的。所以项目可能会有所不同。我希望我现在很清楚。

4

2 回答 2

1

这个怎么样：

CSS

div.content {
    width: 403px;
    border: 1px solid black;
}

ul {
    overflow: hidden;
    list-style: none;
    width: 403px;
    margin: 0 0 -1px 0;
    padding: 0;
}

li {
    margin: 0;
    padding: 0;
    width: 100px;
    float: left;
    border-right: 1px solid black;
    border-bottom: 1px solid black; 
}

li:nth-child(4n+4) {
    border-right: 0;
}

演示

先试后买

于 2013-09-19T13:37:21.710 回答
0

您可能应该使用 CSS 而不是 PHP 来执行此操作。看看CSS nth-child 伪元素。

于 2013-09-19T13:16:22.660 回答