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

发布于 2024-11-12 20:27:55 字数 727 浏览 3 评论 0原文

我正在尝试做这样的事情：

   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>

原文

I'm trying to do something like so:

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

where all the --- are borders but equal lengths. If the current page is the link (i.e. active link) then >> display (it'll be an image). The problem is that if I add padding to the lis then it'll cause the border to be underneath the >> which is not desired. No javascript obviously.

The general markup I've tried to work with is this:

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

分享到QQ

分享到微博

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

发布评论

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

゛时过境迁 2024-11-19 20:27:55

我建议将 .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 演示。

考虑到使用 :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 演示。

参考文献：

:before 。
list-style-image。

I'd suggest applying the .active class to the li, rather than the link, and then using:

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.

Given the difficulties using the :before pseudo-element cross-browser, it seems worthwhile pointing out that list-style-image can be used instead:

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.

References:

回复收藏 0 原文

信仰 2024-11-19 20:27:55

您始终可以将 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>

You can always change your a tags to display block and do something like this to get the border effect you are looking for. Because the border is applied to the a element, it shouldn't matter if you apply padding to the li or not.

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

回复收藏 0 原文

~没有更多了~