スパンタグが機能しない

HTMLとCSSを使用して、水平メニューのデモがあります。あなたが見ることができるように、私はメニューのオプションを区切るためにliタグに右の境界線を置いています。しかし、私は最後のメニューオプションに境界線を持たせたくないので、スパンスタイルを使ってそれを止めさせようとしました。しかし、それは私のために働いているようには見えません。誰も助けることができますか？スパンタグが機能しない

<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

スパンではなくliを考慮する必要があります。試してみてください：

<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タグと

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

出典

2012-01-20 12:00:35

あなたは '：last-child'を意味しませんか？ –

申し訳ありませんが最後の子供 –

2つの問題、このCSSを追加します。

A）リスト（ol）ができないためには、span内部liをラップすることはできませんli以外のものが含まれています。（ここで学ぶための最初のものは検証 HTMLコードオールウェイズすることです：http://validator.w3.org/）

B）の境界線は、あなたがspanから国境を取り除くために抱き合わせている、liです。あなたは、このような、たとえば、li自体からボーダーを削除する必要があります。

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

あなたが直接、最後の要素は、境界線を持つべきではないスタイルシートで定義した場合、それはさらに簡単ですしかし：

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

このようにすれば、liが最後になるかどうかは心配する必要はありません。

出典

2012-01-20 12:04:35 RoToRa

魅力的な。あなたの答えはありがとうございました。 – ShedInTheGarden

スパンタグが機能しない

答えて

関連する問題