跨度標記不起作用

我有一個使用HTML和CSS的橫向菜單演示。正如你所看到的，我在li標籤上放置了一個右邊框來分隔菜單選項。不過，我不希望在最後一個菜單選項上有邊框，因此我使用了span樣式來嘗試停止顯示。但它似乎並沒有爲我工作。誰能幫忙？跨度標記不起作用

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<style type="text/css"> 

#menu a { 
text-decoration:none; 
color:black; 
font-weight:bold; 
} 

#menu ul { 
display:inline; 
list-style:none; 
padding:0px; 
} 

#menu li { 
display:inline; 
margin:0px; 
border-right: solid black thin; 
padding-right:5px; 
color:black; 
} 



</style> 

</head> 

<body> 

<div id="menu"> 
<ul> 
    <li><a href="/">About</a></li> 
    <li><a href="/">Service</a></li> 
    <li><a href="/">Prices</a></li> 
    <span style="border-right:none"><li><a href="/">Contact Me</a></li></span> 
</ul> 
</div> 

</body> 
</html>

來源

2012-01-20 ShedInTheGarden

你必須考慮李，而不是跨度。試試這個：

<span><li style="border-right:none"><a href="/">Contact Me</a></li></span>

來源

2012-01-20 11:58:45 JuSchz

你需要失去'span'或HTML無效。 – RoToRa

是的，但這不是問題的目的 – JuSchz

但是海報可能認爲可以在其中添加一個跨度（或者甚至需要），但事實並非如此。 – RoToRa

那是因爲你在裏面有一個li標籤！只需刪除跨度內的li標籤，它就可以工作。如這裏：http://jsfiddle.net/8cUmx/

來源

2012-01-20 12:00:24 Ninja

您的HTML無效。 – RoToRa

刪除span標籤，並添加這個CSS

#menu li:last-child { 
border-right:none; 
}

來源

2012-01-20 12:00:35

難道你不是指'最後一個孩子'嗎？ –

抱歉，最後一個孩子 –

兩個問題：

A）你不能換一個li一個span內，因爲列表（ol）不能包含除li以外的其他內容。（在這裏學到的第一件事是到八方通驗證你的HTML代碼：http://validator.w3.org/）

B）的邊界上li，你綁到從span刪除邊框。您需要刪除從li自身的邊界，比如像這樣：

#menu li:last-child { 
    border-right: none; 
}

：

<li style="border-right:none"><a href="/">Contact Me</a></li>

然而那就更簡單了，如果你直接在最後一個元素不應該有邊框的樣式定義

通過這種方式，即使您決定對項目進行重新排序或添加新項目，也不用擔心哪個li是最後一個。

來源

2012-01-20 12:04:35 RoToRa

工作了一個魅力。謝謝大家的答案。 – ShedInTheGarden

跨度標記不起作用

回答

相關問題