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

我试图做一些事情，像这样：css - 缩短水平边框的链接列表？

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>

来源

2011-06-03 Matthew

你用什么标记？你有什么尝试？ – 2011-06-03 23:11:29

所以使用边距而不是填充 – 2011-06-03 23:13:23

我建议应用.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。

来源

2011-06-03 23:17:36

您可以随时更改您的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>

来源

2011-06-03 23:28:57 jeremysawesome

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

回答

相关问题