如何在语义上将单个列表分成多个列？

Question

我们的网站用于将单个列表分成多列的当前方法是使用多个uls:

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

这对我来说似乎并不理想,因为从语义上讲,它不是两个列表,而是一个列表.我已经看到很多不适合多列列表的解决方案.我正在寻找一个解决方案:

1. 使用以下标记结构

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

2. 组织如下:

   one    three
   two    four
   

   不是这个:

   one    two
   three  four
   

3. 如果列表长度更改,或者项目包含多行,则无需修改即可工作.

4. 使用有效的语义HTML.
5. 适用于IE8.

理想的解决方案仅限CSS,但我愿意使用jQuery UI或轻量级Javascript.

(PS,这是我的CSS尝试,有明显的问题.)

编辑:此问题特定于语义列表.另一个所谓的"重复"问题是关于<div>元素,这是一个不同的球赛,因为允许额外的标记.a <ul>和a之间不允许额外的标记<li>.这个问题主要集中在语义上,这意味着强调使用HTML来尽可能详细地指出内容的含义.

Answer 1

您可以将列用于支持它的浏览器

演示http://jsfiddle.net/kevinPHPkevin/eaewX/33/

这是一个完整浏览器支持的jQuery示例

演示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 2

很抱歉回答我自己的问题，但我想我得到了一个仅 CSS 的解决方案。

这是 jsFiddle 上的。

基本上，我使用通用同级选择器（此符号：~，也适用于 IE7！）来突出显示断点之后的所有元素，并将它们上下移动。只要你设置一个行高，似乎就可以跨浏览器工作，直到 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;
}

我在这里遗漏了任何明显的东西吗？