Question

I have been learning ASP.NET MVC recently and everything is going well apart from my knowledge of CSS has started to restrict me somewhat, especially the following issue.

In the following picture I understand the majority of the positioning and formatting, however I can’t figure out how to make all of the tabs to be made as wide as the orange coloured <li> block (disregarding the padding involved).

Here is my 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;
}

And here is the relavent 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>

If any more information is required, just ask.

Thanks very much for any suggestions.

Answer 1

You can make the links display block and that will cause it to take all the space available. You might have to change the padding to make it look the way you want though.

ul#adminmenu li a {
    display: block;
}