Question

我试图让我的菜单水平对齐顶部，但在这样做后它仍然在旁边。以下是我的CSS和主页。注意。我正在使用.net microsoft visual studios。

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>

Answer 1

您的CSS希望您的ul具有菜单ID ...但具有该ID的元素是包含div。我先说清楚。

ul#menu

Answer 2

由于所有 li 元素都在你的css中被设置为 inline ，你的问题可以这样解决：

#menu { text-align: center; }

希望它有所帮助。

Answer 3

我为你创建了一个解决问题并将div水平居中的jsfiddle http://jsfiddle.net/trickeedickee/Wj6U9/

CSS菜单水平对齐

3 个答案: