css - 基本 CSS 菜单问题

Question

我最近一直在学习 ASP.NET MVC，除了我对 CSS 的了解开始限制我之外，一切都很顺利，尤其是下面的问题。

在下图中，我了解了大部分定位和格式，但是我不知道如何使所有选项卡都像橙色<li>块一样宽（忽略所涉及的填充）。

这是我的CSS：

ul#adminmenu {
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: left;
}

ul#adminmenu li {
    padding: 10px 20px;
    display: list-item;
    background-color: Orange;
    list-style: none;   
}

ul#adminmenu li a {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #034af3;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
}

这是相关的HTML：

<header>
    <div id="admintitle">
        <h1>Administration</h1>
    </div>  
</header>
<section id="adminmain">
    <div id="div-1a">@* class="page">*@
        <nav>
            <ul id="adminmenu">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("Contracts", "List", "Contract"</li>
                <li id="admin">@Html.ActionLink("Administration", "Administration", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
        </ul>
    </nav>
</div>

如果需要更多信息，请询问。

非常感谢您的任何建议。

Answer 1

您可以使链接显示块，这将导致它占用所有可用空间。您可能必须更改填充以使其看起来像您想要的那样。

ul#adminmenu li a {
    display: block;
}