Come posso interrompere una singola lista in più colonne semanticamente?

Question

L'approccio attuale il nostro sito sta usando per rompere un unico elenco in più colonne è quello di utilizzare più ul s:

<ul> 
    <li>one</li> 
    <li>two</li> 
</ul> 
<ul> 
    <li>three</li> 
    <li>four</li> 
</ul> 

Questa non sembra l'ideale per me, in quanto semanticamente, non due liste, è uno . Ho visto molte soluzioni inadeguate per elenchi di più colonne. Sto cercando una soluzione che:

1. utilizza la seguente struttura di markup

   <ul> 
       <li>one</li> 
       <li>two</li> 
       <li>three</li> 
       <li>four</li> 
   </ul> 
   

2. organizza in questo modo:

   one three 
   two four 
   

   Non questo:

   one two 
   three four 
   

3. Opere senza modifiche se la lunghezza della lista cambia o se gli elementi racchiudono più righe.

4. Utilizza HTML semantico valido.
5. Funziona fino a IE8.

La soluzione ideale è solo CSS, ma sono aperto a utilizzare l'interfaccia utente jQuery o Javascript leggero.

(. PS, here's my CSS attempt, con notevoli problemi)

Edit: Questa domanda è specifico per semantici liste. L'altra domanda apparentemente "duplicata" riguarda gli elementi <div>, che è un altro gioco a palla perché è ammesso markup addizionale. Nessun markup aggiuntivo è consentito tra uno <ul> e uno <li>. Questa domanda è incentrata sulla semantica , il che significa che c'è un'enfasi sull'uso dell'HTML per indicare con il maggior numero di dettagli possibile il significato del contenuto.

Answer 1

Mi dispiace di rispondere alla mia domanda, ma penso che ho avuto una soluzione solo CSS.

Here it is on jsFiddle.

Fondamentalmente, utilizzo il selettore di fratello generale (Questo simbolo: ~, funziona anche in IE7!) Per evidenziare tutti gli elementi dopo il punto di interruzione e spostarli avanti e indietro. Finché si imposta un'altezza di riga, sembra che funzioni cross browser in IE7.

HTML:

<ul> 
    <li>one</li> 
    <li>two</li> 
    <li class="newline">three</li> 
    <li>four</li> 
</ul> 

CSS:

.newrow, 
.newrow ~ li { 
    margin-left: 120px; 
    margin-top: -100px; 
    margin-bottom: 100px; 
} 

Mi sto perdendo qualcosa di ovvio qui?

Answer 2

CSS Columns è la soluzione migliore ma non funziona con i browser più vecchi. È possibile utilizzare nth-child per chiudere qualcosa, ma non si ottiene una lista divisa (è necessario anche un polyfill per utilizzarlo nei browser più vecchi). La soluzione più semplice sarebbe probabilmente uno javascript: dividerà le liste ma lascerà anche il tuo codice pulito. Ecco una funzione per trasformare gli elenchi in un numero qualsiasi di colonne.

http://jsfiddle.net/UrH69/

SCRIPT

$.fn.extend({ 
    list2Columns: function(numCols) { 
     var listItems = $(this).find('li'); /* get the list data */ 
     var listHeader = $(this); 
     var numListItems = listItems.length; 
     var numItemsPerCol = Math.ceil(numListItems/numCols); /* divide by the number of columns requires */ 
     var currentColNum = 1, currentItemNumber = 1, returnHtml = '', i = 0; 

     /* append the columns */ 
     for (i=1;i<=numCols;i++) { 
      $(this).parent().append('<ul class="column list-column-' + i + '"></ul>'); 
     } 

     /* append the items to the columns */ 
     $.each(listItems, function (i, v) 
     {  
      if (currentItemNumber <= numItemsPerCol){ 
       currentItemNumber ++; 
      } else { 
       currentItemNumber = 1; 
       currentColNum ++; 
      } 
      $('.list-column-'+currentColNum).append(v); 
     }); 
     $(this).remove(); 
    } 
}); 

USO

$('ul').list2Columns(2); // Change this number to change num of columns 

HTML

<ul> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
    <li>four</li> 
    <li>five</li> 
    <li>six</li> 
</ul> 

CSS

.column { float:left; } 

Answer 3

Si potrebbe utilizzare le colonne per i browser che lo supportano

DEMO http://jsfiddle.net/kevinPHPkevin/eaewX/33/

Ecco un esempio jQuery per il supporto completo del browser

DEMO http://jsfiddle.net/kevinPHPkevin/MKL4g/131/

var postsArr = new Array(), 
    $postsList = $('ul.posts'); 

//Create array of all posts in lists 
$postsList.find('li').each(function(){ 
    postsArr.push($(this).html()); 
}) 

//Split the array at this point. The original array is altered. 
var firstList = postsArr.splice(0, Math.round(postsArr.length/2)), 
    secondList = postsArr, 
    ListHTML = ''; 

function createHTML(list){ 
    ListHTML = ''; 
    for (var i = 0; i < list.length; i++) { 
     ListHTML += '<li>' + list[i] + '</li>' 
    }; 
} 

//Generate HTML for first list 
createHTML(firstList); 
$postsList.html(ListHTML); 

//Generate HTML for second list 
createHTML(secondList); 
//Create new list after original one 
$postsList.after('<ul class="posts"></ul>').next().html(ListHTML); 

Answer 4

Il modo "corretto" per farlo sarebbe quello di utilizzare le colonne CSS3:

• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts
• http://davidwalsh.name/css-columns

Ma questo solo si arriva a IE10.

Suggerirei di seguire quella rotta e quindi utilizzare spessori IE e javascript o gestire IE9 e IE8. Dimentico, ma modernizr potrebbe fornire uno spessore per aiutarti.

Answer 5

è possibile utilizzare i CSS column-count per che questo demo funziona solo in Chrome, ma si può fare cross browser

http://jsfiddle.net/UuwKC/

ul {-webkit-column-count:2}