css - 带纹理背景的 CSS 点前导

Question

如何在带纹理的背景上添加 CSS 点前导符？

我熟悉在元素之间添加点前导符，但是我找不到一种方法可以让我在文本位于带纹理的背景上时添加它们。

但是，因为菜单是动态的，所以元素不会有一个永久的位置。由于它们不是永久性的，我不能使用背景图像来使我的点工作。

Answer 1

您可以使用浮点数和display:block;overflow:hidden.

如果浮动（左和右）放置在具有上述样式的块之前，它们将使该块的宽度等于父级的宽度减去它们的宽度。

所以，这里是dabblet 的实时示例——你可以用几乎任何标记来实现它，并在领导元素上使用任何样式（背景而不是虚线边框）。

Answer 2

我做了一个小实验：

http://jsfiddle.net/Tymek/5QYEz/

HTML

<ul class="leaders">
    <li>
        <span class="description">Pierwszy punkt</span>
        <span class="destination">2</span>
    </li>
    <li>
        <span class="description">Drugi element listy</span>
        <span class="destination">5</span>
    </li>
</ul>

CSS

ul.leaders {
    list-style: none;
    margin-top: -0.3em;
}

ul.leaders li {
    height: 1.2em;
    display: block;
    border-bottom: 1px dotted #000;
}

ul.leaders .description,
ul.leaders .destination {
    display: block;
    margin: 0.3em 0 -0.3em 0;
    background: #fff;
}

ul.leaders .description {
    float: left;
    padding-right: 0.2em;
}

ul.leaders .destination {
    float: right;
    padding-left: 0.2em;
}

​</p>

Answer 3

OP 在使用带纹理的背景时寻求帮助，简单地用背景颜色掩盖元素将无法满足 OP 的要求。我也遇到了同样的问题。w3.org 上的建议也不满足这个要求。：/