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 */ 
} 

希望这会有所帮助！