水平對齊的CSS菜單

我想讓我的菜單水平地對齊頂部，但是這樣做後它仍然在一邊。以下是我的CSS和masterpage。注意。我正在使用.net微軟視覺工作室。水平對齊的CSS菜單

CSS網頁..

#title, #menu, #footer { 
    background-color: #0174DF; 
    color: #fff; 
} 

ul#menu 
{ 
margin-left: 0; 
padding-left: 0; 
white-space: nowrap; 
} 

#menu li 
{ 
display: inline; 
list-style-type: none; 
} 

#menu a { padding: 3px 10px; } 

#menu a:link, #menu a:visited 
{ 
color: #fff; 
background-color: #036; 
text-decoration: none; 
} 

#menu a:hover 
{ 
color: #fff; 
background-color: #369; 
text-decoration: none; 
} 

#footer { 
    text-align: center;

母版...

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Lottery Syndicate Web Site</title> 
    <asp:ContentPlaceHolder id="head" runat="server"> 
    </asp:ContentPlaceHolder> 
    <link href="css/css/reset.css" media="screen" rel="stylesheet" type="text/css" > 
    <link href="css/css/960.css" media="screen" rel="stylesheet" type="text/css" > 
    <link href="css/css/text.css" media="screen" rel="stylesheet" type="text/css" > 
    <link href="css/style.css" media="screen" rel="stylesheet" type="text/css" > 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div id="container" class="container_16"> 
      <div id="title" class="grid_16"> 
       <img src="images/bingo.png" alt="bingo header" /> 
      </div> 
      <div id="menu" class="grid_3"> 
       <ul> 
        <li><a href="index.aspx">Home</a></li> 
        <li><a href="exercise1.aspx">Exercise 1</a></li> 
        <li><a href="exercise2.aspx">Exercise 2</a></li> 
        <li><a href="exercise3.aspx">Exercise 3</a></li> 
        <li><a href="exercise4.aspx">Exercise 4</a></li> 
        <li><a href="#">Exercise 5</a></li> 
        <li><a href="exercise6.aspx">Exercise 6</a></li> 
        <li><a href="exercise7.aspx">Exercise 7</a></li> 
        <li><a href="exercise8.aspx">Exercise 8</a></li> 
       </ul> 
      </div> 

      <div id="content" class="grid_13"> 
       <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> 

       </asp:ContentPlaceHolder> 
      </div> 

      <div id="footer" class="grid_16"> 
       <p>Footer here</p> 
      </div> 

    </div> 
    </form> 
</body> 
</html>

來源

2012-05-06 Umzz Mo

一個建議，使基於它更好地擴展整個佈局procent – Jester

你的CSS希望你UL擁有菜單的ID ......但隨着該ID的元素是包含div。我先清楚這一點。

ul#menu

來源

2012-05-06 18:28:28

由於所有李元素被設置爲內嵌在你的CSS，你的問題就可以解決這樣的：

#menu { text-align: center; }

希望它能幫助。

來源

2012-05-06 18:36:57 PanterA

我創建了一個的jsfiddle爲您解決問題和中心股利水平http://jsfiddle.net/trickeedickee/Wj6U9/

來源

2012-05-06 18:46:47 frontendzzzguy

水平對齊的CSS菜單

回答

相關問題