参见英文答案 >
CSS: Set divs horizontally in 2 rows4个
我们的网站用于将单个列表分成多列的当前方法是使用多个uls：
我们的网站用于将单个列表分成多列的当前方法是使用多个uls：
<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尽可能详细地指出内容的含义.
解决方法
您可以将列用于支持它的浏览器
DEMO http://jsfiddle.net/kevinPHPkevin/eaewX/33/
这是一个完整浏览器支持的jQuery示例
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);
