浮动列表中的行分隔符

发布于 2025-01-08 03:04:06 字数 543 浏览 2 评论 0原文

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

[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 魔法可以做到这一点，或者我是否必须为每一行使用单独的

原文

This is what I want to achieve.

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

Current code:

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

Yes, rocket science. It's a floated list with row separators. If the separator was a solid line, it could be achieved with border/background. But it's a custom dashed line, so a background wouldn't flow continuously between the items.

Is there some cool CSS wizardry to do this that I'm not aware of, or do I have to use separate <ul> for each row?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧梦荧光笔 2025-01-15 03:04:06

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

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

编辑：< /strong> 这是最后一行被遮盖的图像 http://jsfiddle.net/csswizardry/85UZz/4/

回复收藏 0 原文

奢华的一滴泪 2025-01-15 03:04:06

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

回复收藏 0 原文

汐鸠 2025-01-15 03:04:06

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

回复收藏 0 原文

如歌彻婉言 2025-01-15 03:04:06

这是您所要求的超级基本版本...

<!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 放入具有特定样式的跨度中。

希望这能有所帮助并澄清。

here is a super basic version of what your asking...

<!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>

using some JS could work as well, iterate something to say every # of li's put in a span that has a specific style.

hope this helps and clarifies.

回复收藏 0 原文

油焖大侠 2025-01-15 03:04:06

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

I solved this with the :before selector.

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 原文

~没有更多了~