導航欄 - 高度/間距問題

enter image description here

我不能讓它正常工作，如何解決呢？

<ul class="subnav"> 
    <li> <a href=""> Text One</a></li> 
    <li> <a href=""> Text Two</a></li> 
    <li> <a class="active" href=""> Text Three</a></li> 
    <li> <a href=""> Text Four</a></li> 
</ul> 

<style> 
    .subnav { 
     list-style:none; 
     border-bottom:1px solid #c7c4ba; 
    } 
    .subnav li{ 
     display:inline; 
     font-size:14px; 
     margin-right:1px; 
    } 
    .subnav a:hover { 
     background-color:white; 
     color:black; 
    } 

    .subnav a { 
     background-color:#c7c4ba; 
     color:white; 
     text-decoration: none; 
    } 

    .subnav .active { 
     background-color:white; 
     color:#c61c25; 
     border:1px solid #c7c4ba; 
    } 
</style>

來源

2011-06-15 user622378

喜歡的東西[這]（http://jsfiddle.net/PQyL7/1/）？ – kinakuta 2011-06-15 19:21:39

將這項工作的嗎？ http://jsfiddle.net/ypZqK/1/你想要的效果在那裏，但我不知道你希望不同的事件出現。

CSS：

.subnav { 
     list-style:none; 
     border-bottom:1px solid #c7c4ba; 
     float:left; 
    } 
    .subnav li{ 
     display:inline; 
     font-size:14px; 
     margin-right:1px; 
     float: left; 
     width: 100px; 
     height: 25px; 
     text-align: center; 
     border:1px solid #c7c4ba; 
     border-bottom: 0; 
     line-height: 25px; 
     background-color:#c7c4ba; 
    } 
    .subnav li:first-child{ 
     margin-left: 25px; 
} 
    .subnav a:hover { 
     background-color:white; 
     color:black; 
    } 

    .subnav a { 
     color:white; 
     text-decoration: none; 
    } 

    .subnav li.active { 
     background-color:white; 
     z-index:999; 
    } 

    .subnav li.active a{ 
     color:#c61c25; 
} 
    .clearBorder { 
     position: relative; 
     width: 100px; 
     bottom: 0; 
     background-color: white; 
     float: left; 
     height: 1px; 
}

HTML：

<ul class="subnav"> 
    <li> <a href=""> Text One</a></li> 
    <li> <a href=""> Text Two</a></li> 
    <li class="active"> <a href=""> Text Three <span class="clearBorder"</span></a></li> 
    <li> <a href=""> Text Four</a></li> 
</ul>

來源

2011-06-15 19:34:24 ngen

這個答案是迄今爲止最好的 - 它滿足所有：（1）標籤間的小間隙，（2）底部的行（3）活動標籤底部沒有行。 – antinome 2011-06-15 19:48:15

對於OP，我會建議使用其他元素更改懸停選擇器，除非您只希望錨背景更改顏色懸停而不是選項卡（li）。除非你想保持這種方式。 – ngen 2011-06-15 19:52:24

感謝您的代碼..當我懸停時，背景應該是白色的而不是鏈接背景..如何解決這個問題？ – user622378 2011-06-15 20:37:36

試試這個

<ul class="subnav"> 
    <li><a href="">Text One</a></li> 
    <li><a href="">Text Two</a></li> 
    <li><a class="active" href="">Text Three</a></li> 
    <li><a href="">Text Four</a></li> 
</ul> 

<style> 
    .subnav { 
      list-style:none; 
      padding:4px; 
      border-bottom:1px solid #c7c4ba; 
    } 
    .subnav li{ 
      display:inline; 
      font-size:14px; 
    } 
    .subnav a:hover { 
      background-color:white; 
      color:black; 
    } 

    .subnav a { 
      background-color:#cccccc; 
      color:white; 
      text-decoration: none; 
      padding:4px; 
    } 

    .subnav .active { 
      background-color:white; 
      color:#c61c25; 
      border-left:1px solid #c7c4ba; 
      border-right:1px solid #c7c4ba; 
      border-top:1px solid #c7c4ba; 
      border-bottom:1px solid #ffffff; 
     } 
    </style>

http://htmledit.squarefree.com/

來源

2011-06-15 19:24:01

導航欄 - 高度/間距問題

回答

相關問題