如何将此动态列表拆分为 3 列？

Question

我正在使用一个较旧的网络应用程序，除了将所有内容重写为现代标准之外，我还试图使修改尽可能简单。

正如您在下面看到的，我有一个动态创建的目录列表。该代码有效，但我想不出将列表拆分为 3 列的最佳方法。我仅限于让这个东西在 IE9 中工作（如果它在任何其他浏览器上工作，那只是一个加号）。嵌套表是一团糟，我知道，但这就是它的构建方式，我只是想将它修改为我们的动态目录列表（带有几个复选框）。

是否有一些 PHP 可以做到这一点？或者是否有一些可以工作的 CSS 技术？我只是有点迷失在过去的爆炸中什么会起作用。

           <table width="100%"  border="1" cellpadding="0" cellspacing="0" bordercolor="#808080">
          <tr>
          <td>
        <table width="100%" border=0 cellpadding=0 cellspacing=0>
          <tr align="center" bgcolor="#000000">
            <td valign=bottom class="style6 Normal"><strong>Watertown Network Shared Directory Access<br>
            Applies to &quot;P&quot; drive permissions - <br>
              By Default all users have at <em>least</em> &quot;read-only&quot; access to all folders/files on the &quot;S&quot; drive. </strong></td>
          </tr>
          <tr>
            <td align="left"><table width="100%" border="0">
                <?php
                //$path = '\\\\wttfs001\\private';
                $path = '\\\\wttfs001\\shared';
                $directories = scandir($path);

                echo '<ul>';
                foreach ($directories as $directory){
                    if ($directory === '.' or $directory === '..') {
                            continue;
                        }
                    if(is_dir($path . '/' . $directory)){
                    echo '<input type="checkbox" name="read[]" value="' . $directory . '" />R';
                    echo '<input type="checkbox" name="write[]" value="' . $directory . '" />W';
                    echo ' ' . $directory . '<br>';
                    }
                }
                echo '</ul>';?>
            </table></td>
          </tr>
        </table>

Answer 1

这将取决于您希望它们如何流动。

我在您的循环中没有看到任何 <li> 标记。我会修改你的循环如下：

foreach ($directories as $directory){
  if ($directory === '.' or $directory === '..') { continue;  }
  if (is_dir($path . '/' . $directory)){
    echo '<li><input type="checkbox" name="read[]" value="' . $directory . '" />R</li>';
    echo '<li><input type="checkbox" name="write[]" value="' . $directory . '" />W</li>';
    echo '<li>' . $directory . '</li>';
  }
}

现在，您可以使用标记。从那里，您可以应用样式来调整行或列，给定的标记结构类似于：

HTML

<ul class="dir-1">
  <li><input type="checkbox" name="read[]">R</li>   
  <li><input type="checkbox" name="write[]">W</li>
  <li>dir-1</li>
</ul>
<ul class="dir-2">
  <li><input type="checkbox" name="read[]">R</li>   
  <li><input type="checkbox" name="write[]">W</li>
  <li>dir-2</li>
</ul>

CSS

ul[class^="dir-"], 
ul[class*=" dir-"] {
  padding: 0;
  margin: 0;
  clear: both;
}
ul[class^="dir-"] li, 
ul[class*=" dir-"] li {
  display: inline-block;
  width: 32%;
  float: left;
  margin-right: 1%;
}

http://codepen.io/anon/pen/aOgOdg

Answer 2

以上内容很有帮助，为我指明了 CSS 的方向....找到了一个如此简单的答案，我不敢相信我对它如此挣扎。

            <?php
                //$path = '\\\\wttfs001\\private';
                $path = '\\\\wttfs001\\shared';
                $directories = scandir($path);
                echo '<ul class="fred">';
                foreach ($directories as $directory){
                    if ($directory === '.' or $directory === '..') {
                            continue;
                        }
                    if(is_dir($path . '/' . $directory)){
                    echo '<li class="wilma"><input type="checkbox" name="chkRead[]" value="' . $directory . '" />R</li>';
                    echo '<li class="wilma"><input type="checkbox" name="chkWrite[]" value="' . $directory . '" />W</li>';
                    echo '<li class="directory">'  . $directory .  '</li>';
                    }
                }
                echo '</ul>';
                ?>

我如前所述放入了 li 标签，并给了它们 2 个不同的类。 1 用于复选框，1 用于目录列表。

对于我使用的 CSS：

li.wilma{
display: inline-block;
padding-left: .2em;
padding-bottom: .25em;
padding-top: .25em;
}

li.directory{
display: inline-block;
width: 15%;
padding-right: 1em;
padding-left: 2em;
padding-bottom: .25em;
padding-top: .25em;
}

到目前为止，它适用于我正在寻找的内容，可以使用复选框格式化动态创建的目录列表。老实说，我不知道是否所有的填充都是必要的，CSS 对我来说还很神秘，但我现在有一个漂亮的列表。