Question

我正在尝试这样做：

   a link here
   ------------------
   another link here
   ------------------
>> active link here
   ------------------
   one more link
   ------------------

其中所有---都是边框但长度相等。如果当前页面是链接（即活动链接），则显示>>（它将是图像）。问题是，如果我向li添加填充，那么它将导致边框位于>>下面，这是不希望的。显然没有javascript。

我试图使用的一般标记是：

<ul>
  <li><a href="#">a link here</a></li>
  <li><a href="#">another link here</a></li>
  <li><a href="#">active link here</a></li>
  <li><a href="#">one more link</a></li>
</ul>

Answer 1

我建议将.active类应用于li，而不是链接，然后使用：

li {
    margin: 0 0 0 5em;
    border-bottom: 1px dashed #ccc;
    position: relative;
}
.active:before {
    position: absolute;
    display: block;
    left: -3em;
    width: 2.5em;
    content: '>>';
    content: url(http://path/to/image.gif);
}

JS Fiddle demo

鉴于使用:before伪元素跨浏览器的困难，似乎值得指出可以使用list-style-image代替：

li {
    margin: 0 0 0 5em;
    border-bottom: 1px dashed #ccc;
    position: relative;
}

li.active {
    list-style-position: outside;
    list-style-type: circle; // the fall-back option
    list-style-image: url(http://davidrhysthomas.co.uk/linked/bullet_point.gif);
}

JS Fiddle demo

参考文献：

:before。
list-style-image。

Answer 2

您可以随时更改a标签以显示屏幕并执行此类操作以获得您正在寻找的边框效果。由于边框已应用于a元素，因此如果您将填充应用于li，则无关紧要。

<html>
    <head>
        <style type="text/css">
            ul {width: 100px;}
            ul li a {border-bottom: 1px black dashed; display: block;}
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">a link here</a></li>
            <li><a href="#">another link here</a></li>
            <li><a href="#">active link here</a></li>
            <li><a href="#">one more link</a></li>
        </ul>
    </body>
</html>

css - 缩短水平边框的链接列表？

2 个答案: