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 - 縮短水平邊框的鏈接列表？

回答

相關問題