Question

这就是我想要实现的目标。

[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>？

Answer 1

我可能完全被误解了，但是这不起作用吗？

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

编辑：以下是最后一行http://jsfiddle.net/csswizardry/85UZz/4/屏蔽的图片

Answer 2

你可以在每行第四个li之后添加一个范围，然后按照你想要的方式设置样式，但一定要设置display: inline-block;

Answer 3

我能想到的唯一的魔法就是something like this。基本上使用nth-child(n)来达到预期的效果。

Answer 4

这是你要求的超级基本版......

<!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也可以正常工作，迭代一些东西，说每个＃句子放在一个具有特定风格的范围内。

希望这有助于澄清。

Answer 5

我用: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;
}

浮动列表中的行分隔符

5 个答案: