基本的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;
}