私のPHPループから正しいHTMLを出力する最良の方法は何ですか

Question

私は問題があります、私はHTMLの問題があります、私は最良の方法を使用しているかわからないので、ここに私の問題です： Everthing okです：私はここで、より多くのスペースを持っている場合は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

私はあなたがスタイルシート（CSS）を使用してそれを動作させる必要があると思います。あなたのリストに固定幅を追加しようとします。

Answer 3

いくつかの問題があります。まず、ULはUn-ordered Listの略で、データの最初の列があれば大丈夫です。私はあなたがデータの列を（水平軸の向こう側に）記入する必要があると仮定することができますので、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内のLI
• ラップ全部のペアの各「アーティスト」
• は、私は右のそれを理解している場合、あなたの問題は、ソースコードのインデントにあるスタイルシートであなたのヘッダー行の外観

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; ?> 

しかし、源泉コードを使用している場合 - >フォーマットオプションまたはそれは余分なインデントでレンダリングされます自分でそれをインデント。 印刷またはエコーを使用すると、間違って表示されません。