Разделитель строк в всплывающем списке - PullRequest
Новая
       17

Разделитель строк в всплывающем списке

1 голос
/ 22 февраля 2012

Это то, чего я хочу достичь. 

[Item 0]   [Item 1]   [Item 2]   [Item 3]
- - - - - - - - - - - - - - - - - - - - -
[Item 4]   [Item 5]   [Item 6]   [Item 7]
- - - - - - - - - - - - - - - - - - - - -
[Item 8]   [Item 9]   [Item10]   [Item11]

Текущий код: 

<ul><li>[Item 0]</li>...</ul>
li { float: left; }

Да, ракетостроение.Это плавающий список с разделителями строк.Если разделитель был сплошной линией, это можно сделать с помощью границы / фона.Но это пользовательская пунктирная линия, поэтому фон не будет непрерывно течь между элементами.

Есть ли какая-нибудь крутая CSS-магия для этого, о которой я не знаю, или мне нужно использовать отдельные <ul> за каждый ряд?

Ответы [ 5 ]

2 голосов
/ 22 февраля 2012

Возможно, меня неправильно поняли, но разве это не сработает?

http://jsfiddle.net/csswizardry/85UZz/3/

РЕДАКТИРОВАТЬ: Вот изображение, замаскированное в последнем ряду http://jsfiddle.net/csswizardry/85UZz/4/

1 голос
/ 22 февраля 2012

Только волшебство, о котором я могу подумать, будет примерно таким . В основном используется nth-child(n) для достижения желаемого эффекта.

1 голос
/ 22 февраля 2012

Вы можете добавить интервал после 4-го li в каждой строке, а затем стиль, который вы хотите, но обязательно установите display: inline-block;

0 голосов
/ 05 апреля 2012

Я решил это с помощью селектора :before. 

ul li:nth-child(4n+5):before {
    display: block;
    background: url(separator.png) repeat-x;
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
}
0 голосов
/ 22 февраля 2012

вот супер базовая версия того, что вы спрашиваете ... 

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>untitled</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">    </script>
    <style>
        ul {
            width: 300px;
        }

        ul > li {
            float: left;
            margin-left: 15px;
            list-style: none; 
        }

        span {
            width: 100%;
            display: inline-block;
            border-bottom: 1px dashed #000;
            height: 3px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <span></span>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <span></span>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>

</body>
</html>

использование некоторого JS также может работать, повторять что-то, чтобы сказать, что каждый из # li помещается в диапазон, который имеет определенный стиль.

надеюсь, это поможет и прояснит.

...