html - länge - title tag wordpress



Wie zeige ich eine ungeordnete Liste in zwei Spalten an? (9)

Moderne Browser

Nutzen Sie das Modul css3 columns, um das zu unterstützen, wonach Sie suchen.

http://www.w3schools.com/cssref/css3_pr_columns.asp

CSS:

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

http://jsfiddle.net/HP85j/8/

Legacy-Browser

Leider benötigen Sie für die IE-Unterstützung eine Codelösung, die JavaScript und Dom-Manipulation beinhaltet. Dies bedeutet, dass der Inhalt der Liste jederzeit geändert werden muss, um die Liste in Spalten neu zu sortieren und erneut zu drucken. Die folgende Lösung verwendet jQuery der Kürze halber.

http://jsfiddle.net/HP85j/19/

HTML:

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

JavaScript:

(function($){
    var initialContainer = $('.columns'),
        columnItems = $('.columns li'),
        columns = null,
        column = 1; // account for initial column
    function updateColumns(){
        column = 0;
        columnItems.each(function(idx, el){
            if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
                column += 1;
            }
            $(columns.get(column)).append(el);
        });
    }
    function setupColumns(){
        columnItems.detach();
        while (column++ < initialContainer.data('columns')){
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.columns');
    }

    $(function(){
        setupColumns();
        updateColumns();
    });
})(jQuery);

CSS:

.columns{
    float: left;
    position: relative;
    margin-right: 20px;
}

BEARBEITEN:

Wie unten ausgeführt, werden die Spalten wie folgt angeordnet:

A  E
B  F
C  G
D

während das OP nach einer Variante gefragt hat, die

A  B
C  D
E  F
G

Um die Variante zu bewerkstelligen, ändern Sie einfach den Code wie folgt:

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

https://src-bin.com

Was ist die einfachste Methode, um die Liste mit dem folgenden HTML als zwei Spalten anzuzeigen?

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

Gewünschte Anzeige:

A B
C D
E

Die Lösung muss in Internet Explorer funktionieren können.


Answer #1

Die Legacy-Lösung in der oberen Antwort funktionierte nicht für mich, weil ich mehrere Listen auf der Seite beeinflussen wollte und die Antwort eine einzelne Liste annimmt, plus es verwendet ein gutes Stück des globalen Status. In diesem Fall wollte ich jede Liste in einem <section class="list-content"> ändern:

const columns = 2;
$("section.list-content").each(function (index, element) {
    let section = $(element);
    let items = section.find("ul li").detach();
    section.find("ul").detach();
    for (let i = 0; i < columns; i++) {
        section.append("<ul></ul>");
    }
    let lists = section.find("ul");
    for (let i = 0; i < items.length; i++) {
        lists.get(i % columns).append(items[i]);
    }
});


Answer #3

Hier ist eine mögliche Lösung:

Auszug:

ul {
  width: 760px;
  margin-bottom: 20px;
  overflow: hidden;
  border-top: 1px solid #ccc;
}
li {
  line-height: 1.5em;
  border-bottom: 1px solid #ccc;
  float: left;
  display: inline;
}
#double li {
  width: 50%;
}
<ul id="double">
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
</ul>

Und es ist getan.
Für 3 Spalten verwenden Sie li Breite als 33%, für 4 Spalten verwenden Sie 25% und so weiter.


Answer #4

Ich habe versucht, dies als Kommentar zu posten, konnte aber die Spalten nicht korrekt anzeigen lassen (gemäß Ihrer Frage).

Sie fragen nach:

AB

CD

E

... aber die als Lösung angenommene Antwort wird zurückkehren:

ANZEIGE

SEIN

C

... so ist entweder die Antwort falsch oder die Frage ist.

Eine sehr einfache Lösung wäre, die Breite von <ul> und dann zu schweben und die Breite Ihrer <li> -Elemente so einzustellen

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

ul{
    width:210px;
}
li{
    background:green;
    float:left;
    height:100px;
    margin:0 10px 10px 0;
    width:100px;
}
li:nth-child(even){
    margin-right:0;
}

Beispiel hier http://jsfiddle.net/Jayx/Qbz9S/1/

Wenn Ihre Frage falsch ist, dann gelten die vorherigen Antworten (mit einem JS-Fix für fehlende IE-Unterstützung).


Answer #5

Ich mag die Lösung für moderne Browser, aber die Kugeln fehlen, also füge ich einen kleinen Trick hinzu:

http://jsfiddle.net/HP85j/419/

ul {
    list-style-type: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}


li:before {
  content: "• ";
}


Answer #6

Mit Bootstrap ... Diese Antwort ( https://.com/a/23005046/1128742 ) hat mich auf diese Lösung hingewiesen:

<ul class="list-unstyled row">
   <li class="col-xs-6">Item 1</li>
   <li class="col-xs-6">Item 2</li>
   <li class="col-xs-6">Item 3</li>
</ul>

http://jsfiddle.net/patrickbad767/472r0ynf/


Answer #7

Sie können dies sehr einfach mit dem jQuery-Columns-Plugin tun, um beispielsweise eine ul mit einer Klasse von .mylist zu teilen, die Sie tun würden

$('.mylist').cols(2);

Hier ist ein Live-Beispiel für jsfiddle

Mir gefällt das besser als mit CSS, weil bei der CSS-Lösung nicht alles vertikal nach oben ausgerichtet ist.


Answer #8

mehr eine Antwort nach ein paar Jahren!

in diesem Artikel: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

HTML:

<ul id="double"> <!-- Alter ID accordingly -->
  <li>CSS</li>
  <li>XHTML</li>
  <li>Semantics</li>
  <li>Accessibility</li>
  <li>Usability</li>
  <li>Web Standards</li>
  <li>PHP</li>
  <li>Typography</li>
  <li>Grids</li>
  <li>CSS3</li>
  <li>HTML5</li>
  <li>UI</li>
</ul>

CSS:

ul{
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li{
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
#double li  { width:50%;}
#triple li  { width:33.333%; }
#quad li    { width:25%; }
#six li     { width:16.666%; }




css-multicolumn-layout