什么是从我的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 fuckin'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

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

Answer 3

有几个问题需要解决。首先，UL代表无序列表，如果您所拥有的只是第一列数据，那么它就非常棒。我只能假设你需要填写更多的数据列（跨横轴），所以UL是错误的父标签。如果是正确的标记，则需要附加打开和关闭LI（用于列表项）标记。

@Jonathan Sampson的评论是正确的。你会在这里和其他地方看到很多帖子，表示邪恶的表格是多么的糟糕，而且在误用布局时也是如此。 根据您向我们显示的内容，您有表格数据，并且 应将表标记用作父项。

更新

看来我误解你的数据的性质。来回，在这之后是您的解决方案：

<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
• 裹在一个容器DIV一对LIS
• 包住整个事情的每一个“艺术家”
• 设置你的标题行的外观样式表

Answer 4

如果我的理解是正确的你的问题是与源代码缩进。这是对的吗？ Here will be your answer。 当我使用源代码我有这个问题 - > Format选项从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; ?> 

但如果使用周守军代码 - >格式选项或缩进它自己就会有额外的缩进来呈现。 使用打印或回声它不会出错。