2

这是我的代码：

<ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link 2</a></li>
</ul>

菜单是垂直的并且ul具有特定的宽度。

我想做的是接下来的事情：

------ ul width 300px ------
[link][image repeat........]
[link 2][image repeat .....]

在此处输入图像描述

  • 图像宽度和repeat-x文本高度ulrepeat-y

我尝试使用a:after，但如果没有为您提供特定宽度的文本/图像内容，您将无法使用它。我的图像只有 3px 宽度，因此它会显示一次并显示它。我该怎么做才能显示图像直到ul宽度结束（a:after当然使用）？

4

2 回答 2

4

可用性方面，固定宽度的链接列表（右侧有重复的图案填充）应该可以点击该行项目的整个宽度，包括图案填充。但是，既然您在使用上似乎很任性:after，那么这个Fiddle怎么样？

您必须在content属性中添加一个字符，以便那里有一些东西有背景。不幸的是，由于某种原因，我无法使content: '\0020';（编码空间）工作，所以我使用了一些非常温和的东西，然后将颜色设置为透明rgba(0,0,0,0)。并非所有浏览器都支持 rgba，但有一些资源可以解决这个问题。如果您不使用该路线，您可能只需将竖线 (|) 字符（因为它与图案图像的左边缘对齐）设置为图案的主要颜色。就我而言，我可以将其设置为图像中的深灰色。

无论如何，这应该足以解决您的问题。如果没有，请告诉我。

于 2012-09-12T04:00:04.210 回答
1

content: "\00a0";强制你的css样式出现在:after:-)

于 2013-05-28T12:39:10.367 回答