丸みを帯びたタブリンクを作成するときに、この小さな問題を解決するにはどうすればよいですか？ここ

Question

は実際の例です：私は慎重だが、私は「タブの丸薬」自体をクリックすると、リンクがクリックされない場合、私は、リンクをクリックすることができますどのように

http://jsfiddle.net/Pzvdv/

<ul id="navigation"> 
    <li><a href="#">HOME</a></li> 
    <li><a href="#">OUR APPROACH</a></li> 
    <li><a href="#">MENU</a></li> 
    <li><a href="#">GET IN TOUCH</a></li>  
</ul> 

#navigation { 
    float: left; 
    list-style-type: none; 
} 

#navigation li {  
    background-color: #934B00; 
    border-radius: 6px 6px 0 0; 
    color: White; 
    cursor: pointer; 
    float: left; 
    font-size: 12px; 
    margin-right: 6px; 
    padding: 5px; 
} 

#navigation li a:link { 
    color: White; 
    text-decoration: none; 
} 

お知らせ。

この視覚効果を達成するための回避策またはより良い方法はありますか？

ユーザーが実際の文字や容器の丸薬をクリックしたかどうかは、リンクhrefに従います。ブロックとして表示するように設定し

Answer 1

パディングやその他のスタイルは、<li>から<a>に移動する必要があります。
さらに、display:blockまたはdisplay:inline-blockをアンカーに追加する必要があります。 のパディングが<li>の境界線とアンカーの間にギャップを追加するため、現在、コードが期待どおりに機能しません。

http://jsfiddle.net/Pzvdv/9/

#navigation li {  
    color: White; 
    cursor: pointer; 
    float: left; 
    font-size: 12px; 
    margin-right: 6px; 
} 

#navigation li a:link { 
    display: block;    /* Or inline-block */ 
    color: White; 
    text-decoration: none; 
    background-color: #934B00; 
    border-radius: 6px 6px 0 0; 
    padding: 5px; 
} 

Answer 2

、すなわち：

a { display:block; } 

そして100％に高さ/幅を追加し、あまりにもそこにすべての詰め物を移動します。それはそれがリスト項目全体を満たすようにします。

Answer 3

あなたはそうのようなリンク要素にいくつかのパディングを追加する場合：

#navigation li a { 
    padding:5px 
} 

それは動作するはずです。

Answer 4

リンクのCSSは、代わりにアンカーに適用する必要があります。

#navigation li {  
    float: left; 
} 

#navigation li a { 
    color: White; 
    text-decoration: none; 
    background-color: #934B00; 
    border-radius: 6px 6px 0 0; 
    color: White;= 
    font-size: 12px; 
    margin-right: 6px; 
    padding: 5px; 
    cursor: pointer; 
} 

Answer 5

このようにしますか？ http://jsfiddle.net/Pzvdv/17/

Answer 6

はあなたではなく、実際のリンクのli要素にすべてのプレゼンテーションスタイルを追加している、ちょうどそれらを切り替えて、あなたの丸薬メニューが正常に動作します：

#navigation li { 
    float:left; 
} 

#navigation li a {  
    background-color: #934B00; 
    border-radius: 6px 6px 0 0; 
    color: White; 
    cursor: pointer; 
    font-size: 12px; 
    margin-right: 6px; 
    padding: 5px; 
} 

Answer 7

あなたは<a>要素自体のスタイルを設定する必要があります。

#navigation { 
    float: left; 
    list-style-type: none; 
} 

#navigation li a:link { 
    color: White; 
    text-decoration: none; 
    background-color: #934B00; 
    border-radius: 6px 6px 0 0; 
    color: White; 
    cursor: pointer; 
    float: left; 
    font-size: 12px; 
    margin-right: 6px; 
    padding: 5px; 
}