Angular HTML-Formatierungsfehler

Dies ist mit Bezug auf die Frage, die ich gestern gepostet Link to yesterday's post Alles funktionierte, aber mit Problem die Zeilen jetzt zu brechen. Wie im Bild unten hat die Zeile "G" "H" & "I" in derselben Zeile. Ich versuche nur, jedes Alphabet und seine Kanäle in einer eigenen Reihe zu haben. Ich habe das HTML auch unten angehängt. Bitte beraten. Angular HTML-Formatierungsfehler

<div class="w3-container w3-threequarter"> 
    <ul class="w3-ul w3-card-1" *ngFor="let head of channelDisplayHeads"> 
    <h1 align="center" style="background-color:#0083BC;"> 
     <font color="white">{{ head }}</font> 
    </h1> 
    <ng-container *ngFor="let channel of channelList"> 
     <li class="list-group-item logoDisplay" *ngIf="channel.channel.substr(0, 1) === head"> 
     <img class="w3-image" src="{{ channel.logo }}" align="center" alt="{{ channel.channel }}" width="80" height="80"> 
     <br> 
     <span class="w3-left"> 
      <mark> 
      <font size="1">{{ channel.cbsCode }}</font> 
      </mark> 
     </span> 
     <span class="w3-sand w3-right"> 
      <font size="2">{{ channel.pickCode }}</font> 
     </span> 
     </li> 
    </ng-container> 
    </ul> 
</div>

Quelle

2017-12-15 Sumchans

Nur versuchen, jedes Alphabet zu haben und seine Kanäle in einer eigenen Zeile. – Sumchans

Sie können 'width: 100%;' oder versuchen 'w3-card-12' –

Auf welchen Teil des Codes habe ich das? – Sumchans

Arbeitskopie von oben Frage @ Chris Glücklich und @Sumchans https://codepen.io/kalaiselvan/pen/xpGyzq

.w3-ul > h1{ 
 
width: 40px; 
 
float: left; 
 
} 
 
.logoDisplay{ 
 
float: left; 
 
} 
 

 

 
.w3-ul > h1, .logoDisplay{ 
 
display: inline-block; // if need use !important 
 
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
<div class="w3-container"> 
 

 
<ul class="w3-ul w3-card-12" style="clear:both" > 
 
    <h1 align="center" style="background-color:#0083BC;"> 
 
     <font color="white">heading</font> 
 
    </h1> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
</ul> 
 
<ul class="w3-ul w3-card-1" style="clear:both"> 
 
    <h1 align="center" style="background-color:#0083BC;"> 
 
     <font color="white">heading</font> 
 
    </h1> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
</ul> 
 
<ul class="w3-ul w3-card-1" style="clear:both"> 
 
    <h1 align="center" style="background-color:#0083BC;"> 
 
     <font color="white">heading</font> 
 
    </h1> 
 
    <li class="list-group-item logoDisplay"> 
 
     <img class="w3-image" src="logo" align="center" alt="channel" width="80" height="80"> 
 
     <br> 
 
     <span class="w3-left"> 
 
      <mark> 
 
      <font size="1">code</font> 
 
      </mark> 
 
     </span> 
 
     <span class="w3-sand w3-right"> 
 
      <font size="2">pickcode</font> 
 
     </span> 
 
    </li> 
 
</ul> 
 

 
</div>

Quelle

2017-12-15 06:08:54

Das hat wie ein Zauber funktioniert. Vielen Dank für die Bereitstellung eines Beispiel-Code-Snippets. Wenn Sie nur bestimmte Alphabete überprüfen, haben Sie mehr Kanäle, so dass sie unten gestapelt werden, wenn sie das Breitenlimit erreichen. Wie kann ich sie anzeigen, indem Sie sie nicht in die Spalte der Alphabete bringen? – Sumchans

Angular HTML-Formatierungsfehler

Antwort

Verwandte Themen