Как отобразить строку между элементами списка неупорядоченных, которые каждый раз имеют случайное число li

Question

Я делаю эту страницу, предназначенную для взаимодействия пользователя со страницей, и у нее будет список страниц, которые пользователь определит. Таким образом, этот список будет отображаться в div как неупорядоченный список

о место беглый

и будет иметь случайное количество li, которые будут зависеть от пользователя. Я хочу, чтобы в списке между пунктами была строка, но в последнем li внизу не должно быть ни одной строки, а в первой - в верхней.

Это должно выглядеть как

                                 about

---

                                location

---

                                runaway

в моем css у меня есть:

li {border-bottom: 1px solid rgba (255,255,255,0,6); padding-bottom: 5px;}

кто-нибудь знает, как это сделать? спасибо!

Answer 1

Как насчет использования этого jQuery для применения класса css?

$('li:not(:last)').addClass('test');

найти пример здесь:

http://jsfiddle.net/umupX/7/

Примечание Я пытался использовать предоставленную вами CSS.Кажется, что в IE8 происходит сбой из-за неподдерживаемого 'rgba' Note2 : я успешно протестировал вышеупомянутое в IE, Chrome и Firefox (я бы предпочел чистое решение CSS http://jsfiddle.net/8NZ2s/, ночто не получилось в IE8)

Answer 2

Некоторые браузеры поддерживают +, но не: last-child, поэтому в этом случае вы можете сделать это:

li + li {
  border-top: 1px solid rgba(255,255,255,0.6);
  padding-top: 5px;
}

Это означает, что первый элемент списка не получает верхней границы.

Answer 3

Используйте свойство CSS :last-child.Также см. этот пост для получения дополнительной информации.

Answer 4

Вы также можете сделать это с псевдоэлементом:

li:nth-child(even):before{
    content: '';
    width: 100%;
    float: left;
    clear: both;
    height: 1px; /* border width */
    background-color: rgba(255,255,255,0.6);
}

Answer 5

$('li:not(:last)').css({
 'border-bottom": '1px solid black', 
 'padding-bottom": '5px'
}​)​​​​​​​​​​​​​​​​​​​​;​

Answer 6

Вы также можете попробовать это:

ul {
    overflow: hidden;
    list-style: none outside none;
    padding: 0;
}

li {
  border-bottom: 1px solid #D7DFE4;
  overflow: hidden;
  padding: 10px 0;
  vertical-align: top;
  margin: 0 0 -1px;
}

он в основном скрывает последний разделитель, используя переполнение: скрытый и поля снизу: -1

Answer 7

вы можете сделать это с помощью css:

li:first-child {*css for first li item*/}
li:last-child {/*css for last li item*/}