从PHP循环输出正确的HTML的最佳方法是什么？

Question

我有一个问题，我有一个HTML问题，我不知道我是否使用最好的方法，所以这是我的问题：Everthing是好的：http://screencast.com/t/uJmffaxE 如果我有更多的空间，这里开始出现问题：http://screencast.com/t/1z1GRhOLK 这是我的代码：

<div id="wrap-categories" class="clearfix">
<?php if($this->categories !== false): ?>
    <ul>
    <?php foreach($this->categories as $category):?>
        <li>
            <strong><?=$category['name']?></strong><br />
        <?php if($this->artistsHelper($category['id']) !== false): ?>
            <?php foreach($this->artistsHelper($category['id']) as $artist): ?>
                <p><?=$artist['name']?></p>
            <?php endforeach; ?>    
        <?php endif; ?>
        </li>   
    <?php endforeach; ?>
    </ul>
<?php endif; ?>

以下是生成时标记的外观：

            <div id="wrap-categories" class="clearfix">

                                <ul>
                                        <li>
                        <strong>Dj's</strong><br />
                                                                                <p>Big artists</p>
                                                        <p>asddssdadsasda</p>
                                                        <p>Gigle bossu</p>

                                            </li>   
                                        <li>

                        <strong>Make up</strong><br />
                                                                                <p>Cool</p>

                                            </li>   
                                        <li>
                        <strong>Mamam</strong><br />
                                            </li>   
                                        <li>
                        <strong>Tata</strong><br />

                                            </li>   
                                        <li>
                        <strong>Dawaj</strong><br />
                                            </li>   
                                        <li>
                        <strong>Sexy</strong><br />
                                            </li>   
                                        <li>
                        <strong>Bitch</strong><br />

                                            </li>   
                                        <li>
                        <strong>Armin</strong><br />
                                            </li>   
                                        <li>
                        <strong>Lol</strong><br />
                                            </li>   
                                        <li>
                        <strong>Gogu</strong><br />

                                            </li>   
                                        <li>
                        <strong>Penal</strong><br />
                                            </li>   
                                        <li>
                        <strong>Asasin</strong><br />
                                            </li>   
                                    </ul>
                        </div>

css

#wrap-categories ul li{
float:left;
margin-right:10px;
}

请帮忙吗？！

Answer 1

 <?php $x = 1?>         
 <?php if($this->categories !== false): ?>
    <?php foreach($this->categories as $category):?>
        <div class="column" <?=($x == 6) ? "style=\"clear:left\"" : false;?>>
            <ul>
                <li class="category"><?=$category['name']?></li> <!-- header data... -->
            <?php if($this->artistsHelper($category['id']) !== false): ?>
                    <?php foreach($this->artistsHelper($category['id']) as $artist): ?>
                            <li><?=$artist['name']?></li> <!-- no class info here because its just text -->
                    <?php endforeach; ?>    
            <?php endif; ?>
            </ul>
            <?php ($x == 6) ? $x = 1 : $x++;?>
         </div>   
    <?php endforeach; ?>
<?php endif; ?>

Answer 2

有几个问题需要解决。首先，UL代表无序列表，如果您拥有的只是第一列数据，那么它就很棒。我只能假设您需要填写更多的数据列（横跨水平轴），因此UL是错误的父标记。如果是正确的标记，则需要附加开始和结束LI（对于列表项）标记。

@Jonathan Sampson的评论是正确的。你会在网上和其他地方看到很多帖子，说明邪恶的表是怎样的，当被误用于布局时也是如此。 根据您向我们展示的内容，您有表格数据，并且应该使用Table标记作为父标记。

更新

我似乎误解了你的数据的性质。来回走动后，这是您的解决方案：

<style type="text/css">

     .column
     {
          float: left;
          display: inline;
          clear: none;
          margin: 0 5px;
     }

     .column UL LI 
     {
          list-style: none;
     }


     .category
     {
         font-weight: bold;
     }
 </style>

 <div> <!-- this is an outer/wrapper/container -->
 <?php if($this->categories !== false): ?>
    <?php foreach($this->categories as $category):?>
        <div class="column">
            <ul>
                <li class="category"><?=$category['name']?></li> <!-- header data... -->
            <?php if($this->artistsHelper($category['id']) !== false): ?>
                    <?php foreach($this->artistsHelper($category['id']) as $artist): ?>
                            <li><?=$artist['name']?></li> <!-- no class info here because its just text -->
                    <?php endforeach; ?>    
            <?php endif; ?>
            </ul>
         </div>   
    <?php endforeach; ?>
    </div>

我在这里发布的内容与您开始时的内容存在一些差异：

• 将每列包裹在浮动DIV中
• 将每个“艺术家”包裹在一对LI中
• 将整个东西包裹在容器DIV中
• 在样式表中设置标题行的外观

Answer 3

我认为你必须使用样式表（css）来使它工作。尝试在列表中添加固定宽度。

Answer 4

如果我理解正确你的问题是源代码缩进。这是对的吗？ Here will be your answer。当我使用Netbeans IDE的源代码 - >格式选项时，我遇到了这个问题：

        <div class="for">
            <?php for ($i = 0; $i < 10; $i++): ?>
<p> <!-- this "p" without indentation will be correct rendered -->
paragraph
            </p> <!-- this one will always render wrongly -->
           <?php endfor; ?>

但是如果使用源代码 - >格式选项或自己缩进它将使用额外的缩进进行渲染。使用print或echo它没有出错。