Wie erstelle ich mit CSS und JavaScript eine zweispaltige ungeordnete Liste?

So zeigen Sie eine ungeordnete Liste in zwei Spalten an

Um eine ungeordnete Liste in zwei Spalten anzuzeigen, gibt es je nach Browser mehrere Ansätze Kompatibilitätsanforderungen.

Moderne Browser:

CSS3 bietet die Spaltenmodul, das die einfache Erstellung mehrspaltiger Layouts ermöglicht. Mit dem folgenden CSS-Code können Sie die Liste in zwei Spalten unterteilen:

ul {
  columns: 2;
}

Legacy-Browser:

Internet Explorer unterstützt das CSS3-Spaltenmodul nicht. Für IE ist eine JavaScript-Codelösung erforderlich, um die Liste dynamisch in Spalten umzustrukturieren:

<div>
  <ul class="columns" data-columns="2">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
  </ul>
</div>

<script>
  (function($) {
    // JavaScript code to create the two-column layout
  })(jQuery);
</script>

Hinweis: Der JavaScript-Code ordnet die Spalten zunächst wie folgt an:

• A E
• B F
• C G
• D

Um sie wie vom OP gefordert horizontal auszurichten:

• A B
• C D
• E F
• G

ändern Sie die updateColumns()-Funktion auf:

function updateColumns() {
  column = 0;
  columnItems.each(function(idx, el) {
    if (column > columns.length) {
      column = 0;
    }
    $(columns.get(column)).append(el);
    column += 1;
  });
}

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS und JavaScript eine zweispaltige ungeordnete Liste?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!