我们网站目前使用的将单个列表分成多列的方法是使用多个 ul小号:
<ul>
<li>one</li>
<li>two</li>
</ul>
<ul>
<li>three</li>
<li>four</li>
</ul>
这对我来说似乎不太理想，因为从语义上讲，它不是两个列表，而是一个。我已经看到很多针对多列列表的不充分解决方案。我正在寻找一种解决方案:
使用以下标记结构
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
这样组织:
one three
two four
不是这个:
one two
three four
如果列表长度发生变化，或者如果元素换行多行，则无需修改即可工作。
- 使用有效的语义 HTML。
- 适用于 IE8。
理想的解决方案是仅使用 CSS，但我愿意使用 jQuery UI 或轻量级 Javascript。
(PS，here's my CSS attempt，有明显的问题。)
编辑:此问题特定于语义 列表。另一个所谓的“重复”问题是关于 <div>元素，这是一个不同的球赛，因为允许额外的标记。 <ul> 之间不允许附加标记和一个 <li> .这个问题的重点是语义，这意味着强调使用 HTML 尽可能详细地指示内容的含义。
您可以为支持它的浏览器使用列
演示 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);