0

メニューを上から横に並べようとしていますが、横に並べたままです。以下は私のCSSとマスターページです。ノート。.net microsoftvisualstudiosを使用しています。

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>
4

3 に答える 3

0

あなたのCSSはあなたのulがメニューのIDを持つことを期待しています...しかし、そのIDを持つ要素はそれを含むdivです。私は最初にそれをクリアします。

ul#menu
于 2012-05-06T18:28:28.907 に答える
0

すべてのli要素がCSS でインラインになるように設定されているため、問題は次のように解決できます。

#menu { text-align: center; }

それが役に立てば幸い。

于 2012-05-06T18:36:57.230 に答える
0

問題を解決し、div を水平方向に中央揃えする jsfiddle を作成しましたhttp://jsfiddle.net/trickeedickee/Wj6U9/

于 2012-05-06T18:46:47.537 に答える