Was ist die beste Methode, um die richtige HTML aus meiner PHP-Schleife

Question

Ich habe ein Problem, ich habe ein HTML-Problem, ich weiß nicht, ob ich die beste Methode verwende, so ist hier mein Problem: Everthing ist ok: http://screencast.com/t/uJmffaxE
Wenn ich mehr Platz haben, hier die Probleme beginnen: mein Code http://screencast.com/t/1z1GRhOLK
hier:

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

Und hier ist wie das Markup aussieht, wenn generiert:

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

Die CSS

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

Jede Hilfe bitte ?!

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

Ich denke, Sie müssen Stylesheet (CSS) verwenden, um das zu machen. Versuchen Sie, Ihrer Liste eine feste Breite hinzuzufügen.

Answer 3

Es gibt mehrere Probleme zu lösen. Erstens, UL steht für Ungeordnete Liste und ist großartig, wenn Sie nur die erste Datenspalte hatten. Ich kann nur annehmen, dass Sie mehr Datenspalten (über die horizontale Achse) ausfüllen müssen, also ist UL das falsche Eltern-Tag. Wenn das richtige Tag wäre, müssten Sie öffnende und schließende LI-Tags (für Listenelemente) anhängen.

@ Jonathan Sampson's Kommentar ist korrekt. Du wirst viele Posts hier und anderswo online sehen, die sagen, wie böse Tabellen sind, und das ist wahr, wenn sie für Layoutzwecke missbraucht werden. Basierend auf dem, was Sie uns gezeigt haben, haben Sie tabellarische Daten und das sollte ein Table-Tag als Eltern verwenden.

aktualisieren

Es scheint, ich die Art Ihrer Daten falsch verstanden. Nachdem er hin und her, diese ist Ihre Lösung:

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

Es gibt ein paar Unterschiede in dem, was ich gepostet hier und was Sie begann mit:

• Wrap jede Spalte in einem schwebenden DIV
• Wrap jeder "Künstler" in einem Paar LIs
• Wickeln Sie das ganze in einem Container DIV
• das Aussehens Ihrer Kopfzeile im Stylesheet Set

Answer 4

Wenn ich verstehe es richtig, Ihr Problem mit der Quellcode Vertiefung ist. Ist es richtig? Here will be your answer. Ich hatte dieses Problem, wenn ich die Source Code verwenden -> Format-Option von 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; ?> 

Aber wenn die Souce-Code verwenden -> Format Option oder einrücken, es selbst wird es mit zusätzlichem Einschnitte gemacht werden. Mit Drucken oder Echo ist es nicht schief gegangen.