Problemumgehung für CSS -Grenzen, die sich nur für den ersten Listenelement bewerben können

 .
  Hintergrundfarbe: #f7f7f7;
  Grenze: 5PX Solid #1098ad;
  Polsterung: 5px;
  Breite: 500px;
  Typ-Typ-Typ: Keine; /* Entfernen Sie den Standardstil von Listenelementen wie Punkten*/
  Randboden: 10px; /* Optional: Abstand zwischen Listenelementen hinzufügen*/
}

.
  Breite: 100px;
  Höhe: 70px;
  float: links; /* Lass das Bild links schwimmen*/
  Rand-Rechts: 10px; /* Fügen Sie den Abstand zwischen Bildern und Text hinzu*/
}

.
  Überlauf: versteckt; /* Löschen Sie float, um zu verhindern, dass das übergeordnete Element zusammenbricht*/
}

.
  Anzeige: Block; /* Machen Sie den Link die gesamte Zeile einnehmen*/
  Schriftgewicht: fett;
}

.
  Schriftgröße: 0,8EM;
  Farbe: #666;
}

Die entsprechende HTML -Struktur lautet wie folgt:

 <beiseite>
  <h5> <strong> Verwandte Beiträge </strong> </h5>
  <ul>
    <li class="verwandte Post">
      <img src="image1.jpg" alt="Mantyping"    style="max-width:90%"  style="max-width:90%">
      <div>
        <a href="howtolearnwebdevelopment.html" class="Related-Link"> Wie man Webentwicklung lernt </a>
        <p class="verwandt-autor"> <strong> Von Jonas Schmed </strong> </p>
      </div>
    </li>
    <li class="verwandte Post">
      <img src="image2.jpg" alt="lightning"    style="max-width:90%"  style="max-width:90%">
      <div>
        <a href="UnbekanntePowersOfcs.html" class="Related-Link"> Die unbekannten Kräfte von CSS </a>
        <p class="verwandt-autor"> <strong> von Jim Dillon </strong> </p>
      </div>
    </li>
    <li class="verwandte Post">
      <img src="Image3.jpg" alt="JavaScript Code"    style="max-width:90%"  style="max-width:90%">
      <div>
        <a href="javascriptisawesome%0A%20%20%20%20%20%20%20%20<p%20class%20=%20" verwandt-autor> <strong> von Matilda </strong> 
      </a>
</div>
    </li>
  </ul>
</beiseite>

In diesem Beispiel wird die. Um den Effekt besser anzuzeigen, fügt der Beispielcode auch Stile wie das schwimmende Bild, das klare Schwimm- und Anpassungsabstand hinzu.

Lösung: Fügen Sie der gesamten Seitenleiste Grenzen hinzu

Wenn das Ziel darin besteht, der gesamten Seitenleiste einen ganzen Grenze hinzuzufügen, sollte der CSS -Stil auf das Element angewendet werden. Hier ist ein Beispiel:

 beiseite {
  Hintergrundfarbe: #f7f7f7;
  Grenztop: 5px fest #1098ad;
  Grenzboden: 5PX Solid #1098AD;
  Polsterung: 20px;
  Breite: 500px;
}

Die entsprechende HTML -Struktur entspricht dem obigen Beispiel.

Notizen und Zusammenfassung

• HTML -Strukturprüfung: Stellen Sie sicher, dass die HTML korrekt strukturiert ist und dass alle Listenelemente in den Elementen und
  korrekt enthalten sind.
• CSS -Selektor: Bestätigen Sie, ob der CSS -Selektor korrekt auf das Zielelement verweist. Wenn das Ziel jedes Listenelement ist, sollte der Selektor die Klasse oder ID sein, die auf das Element
• angewendet wird. Wenn das Ziel die gesamte Seitenleiste ist, sollte der Selektor das Element sein.
• Stilkonflikt: Überprüfen Sie, ob andere CSS -Stile mit dem aktuellen Stil in Konflikt stehen, was dazu führt, dass der Grenze nicht normal angezeigt wird. Sie können die Entwickler -Tools des Browsers verwenden, um den Elementstil zu überprüfen und festzustellen, ob Stile überschrieben werden.
• Browserkompatibilität: Unterschiedliche Browser können eine geringfügige Parsen von CSS -Stilen aufweisen, sodass während der Entwicklung Kompatibilitätstests erforderlich sind.

Bei den oben genannten Schritten sollten Sie in der Lage sein, das Problem zu lösen, dass die CSS -Grenzen nur auf das erste Listenelement angewendet werden und die richtigen Grenzen für jedes Listenelement oder die gesamte Seitenleiste hinzufügen. Denken Sie daran, dass das Verständnis der Rolle der HTML -Struktur und der CSS -Selektoren der Schlüssel zur Lösung solcher Probleme ist.