-1

私は最近 ASP.NET MVC を学んでいますが、CSS に関する私の知識とは別に、すべてが順調に進んでおり、特に次の問題が多少制限され始めています。

次の図では、配置とフォーマットの大部分を理解していますが、すべてのタブをオレンジ色の<li>ブロックと同じ幅にする方法がわかりません (関連するパディングを無視します)。

CSS メニュー

ここに私の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>

さらに情報が必要な場合は、お尋ねください。

ご提案いただきありがとうございます。

4

1 に答える 1

6

リンクを表示ブロックにすることができます。これにより、使用可能なすべてのスペースが使用されます。ただし、必要に応じてパディングを変更する必要がある場合があります。

ul#adminmenu li a {
    display: block;
}
于 2012-08-09T19:44:41.100 に答える