Выберите последовательные группы, используя nth-child?

Question

Можно ли использовать nth-child () для выбора последовательных элементов?

У меня есть упорядоченный список из 24 элементов.Я хочу разделить их на 4 колонки.В настоящее время я делаю это так:

#location-menu li:nth-child(1),
#location-menu li:nth-child(2),
#location-menu li:nth-child(3),
#location-menu li:nth-child(4) {
    margin-left: 0;
}
#location-menu li:nth-child(5),
#location-menu li:nth-child(6),
#location-menu li:nth-child(7),
#location-menu li:nth-child(8) {
    margin-left: 100px;
}

Как вы можете видеть, 24-й предмет выйдет из-под контроля.Лучше всего использовать CSS3-столбцы для разделения списка, но важно, чтобы этот сайт работал в IE8.

Я надеялся на что-то вроде этого:

#location-menu li:nth-child(1-4) {
    margin-left: 0;
}
#location-menu li:nth-child(5-8) {
    margin-left: 0;
}

Спасибо запомощь!

Answer 1

Попробуйте это

#location-menu li:nth-child(n+0)  { margin-left: 0;     }
#location-menu li:nth-child(n+5)  { margin-left: 100px; }
#location-menu li:nth-child(n+9)  { margin-left: 200px; }
#location-menu li:nth-child(n+13) { margin-left: 300px; }
/* and so on */

Answer 2

Может быть, это может помочь вам:

#location-menu li:nth-child(4n+0){
     margin-left: 0;
}
#location-menu li:nth-child(4n+1){
     margin-left: 100px;
}
...

но он будет отображать элементы по строкам, а не по столбцам ...