Question

我将一个锚标签放在li标签内，我希望整个li都可以点击。我有那个部分在工作。

我还有一个currentpage类，用于从菜单中突出显示当前页面。当该类进入游戏时，我的字符长度较长的lis会转到下一行，因为宽度太小而无法容纳字符。

我已经玩过li的宽度和a的填充，我似乎无法让它正常工作。当我在l里面有lis但它希望我的HTML有效时，它正如我想要的那样工作。

我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

希望这有帮助！

CSS - li标签内的锚标签大小问题

1 个答案: