浮动列表中的行分隔符答案

【问题标题】：Row separator in floated list浮动列表中的行分隔符
【发布时间】：2012-02-22 08:42:28
【问题描述】：

这就是我想要达到的目标。

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

【问题讨论】：

这样的？ jsfiddle.net/thirtydot/ZvcZL
@thirtydot ~~这可以与自定义虚线（图像）一起使用吗？~~ 我想可以。添加为答案，我会接受

标签： css list css-float separator

【解决方案1】：

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

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

编辑：这是在最后一行被屏蔽的图像http://jsfiddle.net/csswizardry/85UZz/4/

【讨论】：

【解决方案2】：

您可以在每行的第 4 个 li 之后添加一个跨度，然后按照您想要的方式设置样式，但请确保设置 display: inline-block;

【讨论】：

嗯。可以用纯 CSS 来代替吗？喜欢li:nth-child(4n):after { width: 100%; background: url(bg.png) repeat-x; }

【解决方案3】：

我能想到的只有魔法是something like this。基本上使用nth-child(n)就可以达到想要的效果了。

【讨论】：

【解决方案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 也可以工作，迭代一些东西来说每个 li 的 # 放在一个具有特定样式的 span 中。

希望这有助于澄清。

【讨论】：

请停止删除您的答案。您不能将<span> 直接放在<ul> 中。

【解决方案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;
}

【讨论】：