我的網站按鈕不是完全可點擊的

這是我的HTML我試圖讓我的按鈕完全可點擊，但我認爲它不工作。鏈接僅在按鈕文本上啓用。我嘗試了一切，但無法找到解決方案。我的網站按鈕不是完全可點擊的

HTML

<nav id="nav"> 
    <ul> 
     <li> 
      <span class="nav-icon icon-home"></span> 
      <a href="index.html">Home</a> 
     </li> 
     <li class="current-menu-item"> 
      <span class="nav-icon icon-user"></span> 
      <a href="about.html">About Us</a>    
     </li> 
    </ul> 
</nav>

CSS

#nav-container{ 
    float: left; 
    width: 100%; 
    z-index: 900; 
    position: relative; 
    height: 65px; 
    border-top: 1px solid #e8e8e8; 
    border-bottom: 1px solid #e8e8e8; 
    background: #ffffff; /* Old browsers */ 
    background: -moz-linear-gradient(top, #ffffff 0%, #fafafa 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#fafafa)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #ffffff 0%,#fafafa 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #ffffff 0%,#fafafa 100%); /* Opera 11.10+ */ 
    background: linear-gradient(to bottom, #ffffff 0%,#fafafa 100%); /* W3C */ 
} 

#nav-container select{ 
    display: none; 
} 

#nav-container .grid_12{ 
    margin-bottom: 0; 
} 

#nav{ 
    height: 100%; 
    width: 730px; 
    margin-right: 20px; 
    list-style: none; 
    float: left; 
} 

.nav-icon{ 
    color: #444; 
    font-size: 14px; 
    margin-bottom: 3px; 
    text-align: center; 
    display: block !important; 
    width: 100%; 
} 

#nav > ul{ 
    display: block !important; 
} 

#nav li{ 
    float: left; 
    position: relative; 
    cursor: pointer; 

} 

#nav > ul > li{ 
    padding: 15px 20px; 
    height: 65px; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    border-right: 1px solid #e8e8e8; 
} 

#nav > ul > li:first-child{ 
    border-left: 1px solid #e8e8e8; 
} 

#nav li a{ 
    float: left; 
    font: 12px 'Open Sans', Arial, sans-serif; 
    color: #333; 
} 

#nav > ul > li.current-menu-item a, 
#nav > ul > li.current-menu-item span, 
#nav > ul > li:hover span, 
#nav > ul > li:hover a{ 
    color: #fff; 
} 
#nav > ul > li a:hover{ 
    color: #fff !important; 
} 

#nav > ul > li.current-menu-item, 
#nav > ul > li:hover, { 
    background-color: #d52b2a !important; 
}

來源

2013-06-20 user2504339

HTML請求。代碼的jsFiddle鏈接也很棒。 – Nitesh

這個屬性添加到您的CSS類

#nav li a{display:block;}

來源

2013-06-20 08:52:09

的最佳答案（沒有看到代碼）是你的鏈接（a標籤）在您的列表項目內（li標籤）。導航的可點擊部分（a標籤）應該應用填充（並可能受益於應用display: block）。這樣，文本週圍的「死亡空間」也將是可點擊的。

來源

2013-06-20 08:52:27 MassivePenguin

非常感謝你......現在工作:) – user2504339

使用

display:inline-block; 
padding: 15px 20px;

在#nav li a

喲還可以從#nav > ul > li刪除高度和它給了a標籤。

來源

2013-06-20 09:00:45

我的網站按鈕不是完全可點擊的

回答

相關問題