CSS - li標籤中的錨標籤大小問題

Question

我在li標籤中放置了一個錨標籤，我希望整個li都是可點擊的。我有那部分工作。

我也有一個currentpage類來突出顯示當前頁面從我的菜單。 當這個課程進場時，我的lis字符長度更長，因爲寬度太小而無法容納字符，所以請去下一行。

我已經玩過李的寬度和填充的a我似乎無法讓它正常工作。當我在裏面的時候它正在工作，但我希望我的HTML是有效的。

我的代碼：

.sub-menu li { 
 
\t \t width: 185px; 
 
\t \t color: #F0F0F0; 
 
\t \t background-image: url('../images/submenu-li.png'); 
 
\t \t display: inline-block; \t 
 
\t } 
 

 
.sub-menu li a { 
 
\t \t display:block; 
 
\t } 
 
\t 
 
\t .sub-menu .currentpage a { 
 
\t \t padding: 0px 25px 0px 25px; 
 
\t \t color: #3385D6; 
 
\t \t background-image: url('../images/currentpage-li.png'); 
 
\t \t font-weight: bold; 
 
\t }

<ul class="sub-menu"> 
 
\t <li <?php if ($thisPage=="lAdmin") echo " class=\"currentpage\""; ?>><a href="index.php?page=lAdmin">Application Licenses</a></li> 
 
\t <li class="currentpage"><a href="index.php?page=lAdminDev">Application Devices</a></li> 
 
</ul>

Answer 1

還有一堆小東東可以的，但這裏有過，我已經在不同的用我的頭頂一對夫婦的選擇方案：

最簡單的方法是防止包裝和溢出文本。凡是溢出得到在這個例子中的省略號：

.sub-menu .currentpage a { 
    /* ...your styles...*/ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

通常我的導航首選方案是允許的鏈接，大小自己，調整與媒體查詢空間問題。這工作是這樣的：

.sub-menu li { 
    color: #F0F0F0; 
    background-image: url('../images/submenu-li.png'); 
    display: inline-block; 
} 

.sub-menu li a { 
    display:block; 
    /* set padding for all links here */ 
    padding: 0 1.5em; 
    /* set spacing/margin between links here */ 
    margin: 0 1.5em; 
} 

.sub-menu .currentpage a { 
    color: #3385D6; 
    background-image: url('../images/currentpage-li.png'); 
    font-weight: bold; 
} 

@media (min-width: 100em) { 
    /* Adjust link's spacing and font-sizes to fit better */ 
} 

希望這會有所幫助！