基本的CSS菜單問題

-1

最近我一直在學習ASP.NET MVC，除了我對CSS的知識外，一切都進展順利，已經開始限制我，特別是以下問題。基本的CSS菜單問題

在下面的圖片中，我瞭解了大部分的定位和格式化，但我無法弄清楚如何使所有制表符的製作寬度與橙色<li>塊一樣寬（忽略所涉及的填充）。

CSS Menu

這裏是我的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; 
}

這裏是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>

如果需要任何詳細信息，只問。

非常感謝您的任何建議。

來源

2012-08-09 XN16

這不是一個ASP.Net問題，它只是HTML和CSS。請發佈呈現的HTML，以便我們可以使用它。 – sachleen 2012-08-09 19:42:54

您可以使鏈接顯示塊，這將導致它採取所有可用的空間。您可能需要更改填充以使其看起來像您想要的樣子。

ul#adminmenu li a { 
    display: block; 
}

來源

2012-08-09 19:44:41 sachleen

完美，非常感謝！ – XN16 2012-08-09 19:49:40

基本的CSS菜單問題

回答

相關問題