添加|在菜單中的li標籤

是否可以將|作爲分隔符添加到CSS中菜單中的每個列表元素？我試過content: "|"，但沒有奏效。添加|在菜單中的li標籤

菜單看起來是這樣的：

<ul> 
    <li><a href="...">link</a></li> 
    <li><a href="...">link</a></li> 
    <li><a href="...">link</a></li> 
    <li><a href="...">link</a></li> 
    <li><a href="...">link</a></li> 
</ul>

和結果是：

link link link link

，我想：

link | link | link | link

我知道如何做到這一點在JavaScript ，但CSS會更好:)菜單是gen自動地進行自我評估，我不想惹惱它。

來源

2013-05-03 miszczu

爲什麼不使用邊界呢？ – j08691 2013-05-03 14:00:23

我同意邊界將是正常的方式。如果你仍然想要你的管道，你可以使用'：before'/ – 2013-05-03 14:02:00

我會那樣做有邊界：

ul li a { border-left:1px solid #000; display:block; }

如果你不想在第一線做的，補充一點：

ul li a:first-child { border:none; }

來源

2013-05-03 14:01:43

小修正：'border-left：none' – 2013-05-03 14:08:27

@JanDvorak，是的，如果你願意，你可以得到那個具體的東西，但這是不必要的 – 2013-05-03 14:11:25

使用邊界：

li{border-left : 1px solid black;} 
li:first-child{border : none;}

來源

2013-05-03 14:01:44

如果您發佈了迄今爲止嘗試過的小提琴，那麼這將會有所幫助，但這應該可行：

li:not(:last-child):after { 
    content:"|"; 
}

Working sample on JSfiddle。

來源

2013-05-03 14:01:45

讓我猜測：IE8是退出遊戲 – 2013-05-03 14:04:49

@JanDvorak，因爲它該死的應該是:)我只是回答這個問題，這不是我的立場來決定產生的網站的後果。 TS想通過'content'添加一個管道字符，這就是你如何做到的。 – 2013-05-03 14:06:26

你應該說明你的答案與答案的限制，我相信 – 2013-05-03 14:07:49

你需要使用一個僞元素爲content，像::before或::after：

li + li::before { 
    content: "| "; 
}

Here’s a demo.

正如其他人雖然提到的，如果你正在尋找一條線，使用border-(left|right)與padding或根據需要使用margin。

來源

2013-05-03 14:02:06 Ryan

（PS如果有人在尋找IE7/8兼容性：只使用一個冒號。） – Ryan 2013-05-03 14:10:16

根據互聯網上的許多消息來源（[MDN]）（https://developer.mozilla.org/en-US/docs/Web/ CSS/:: before）是其中之一）'：之前'只支持IE8 +，而不支持IE7 – Xotic750 2013-06-20 23:09:18

看一看this fiddle。

li 
{ 
    float:left; 
    list-style:none; 
} 
li:after 
{ 
    content:"|"; 
    margin:0px 3px; 
}

編輯

沒有注意到，直到後，我張貼礦井在年底有一個額外的管別人也給我寫之前正確的方式，使沒有擺脫我寫的， here is it updated。

li 
{ 
    float:left; 
    list-style:none; 
} 
li+li:before 
{ 
    content:"|"; 
    margin:0px 3px; 
}

來源

2013-05-03 14:02:25 Turnerj

像這樣的事情

http://jsfiddle.net/SzvQq/

ul li a { 
    display: block; 
    padding: 0 15px; 
    border-left: 1px solid #000; 
} 

ul li:first-child a { 
    border-left: none; 
}

來源

2013-05-03 14:04:43

添加|在菜單中的li標籤

回答

相關問題