Question

如何在带纹理的背景上添加CSS点引线？

我熟悉在元素之间添加点引线，但是当文本在带纹理的背景上时，我找不到允许我添加它们的方法。

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

Answer 1

您可以使用浮点数和display:block;overflow:hidden的行为。

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

所以，这里是live example at dabblet - 您可以使用几乎任何标记来实现它，并在leader元素上使用任何样式（背景而不是虚线边框）。

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;
}

Answer 3

OP正在寻求帮助，使用带纹理的背景进行此操作，只需用背景颜色屏蔽元素就无法使用OP所需的功能。我也遇到了同样的问题。关于w3.org的建议也不满足这一要求。：/

CSS点领导有织地不很细背景

3 个答案: