1

我希望我<div id="container">位于导航菜单的右侧，但我遇到了问题。

任何人都可以帮我解决这个问题。

索引.php

<!-- This is the page identifier. Change on each of your pages! -->
<?php $page ='page_index'; ?>
<!doctype html>
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <meta name="description" content="Example of PHP include active navigation">
    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <div id="container">
        <header>
            <h1>Index page</h1>
        </header>

        <!-- This is where we want to include the nav.php file! -->
        <?php include("nav.php"); ?>

        <div id="main" role="main">
            <p>This is the index page</p>
        </div>

        <footer>
            <p>This is the footer</p>
        </footer>
    </div>
</body>
</html>

导航.php

<nav role="navigation" id="<?php echo $page ?>">
    <ul>
        <li><a class="index" href="index.php">Home</a></li>
        <li><a class="about" href="about.php">About</a></li>
        <li><a class="contact" href="contact.php">Contact</a></li>          
    </ul>
</nav>

样式.css

nav ul {
    list-style: none; 
    display:inline-block;
        float:left;
}

ul a {
    color:green;

}

nav#page_index ul li a.index, 
nav#page_about ul li a.about, 
nav#page_contact ul li a.contact {
    color:red;
}

这是我添加到style.css

div.container
{
   float:left;
}

请让我知道如何使用一些好看的格式制作左侧导航菜单。

提前致谢..！

4

2 回答 2

2

将左侧导航菜单旁边的所需内容包装在新div元素中。然后添加float:left到这个容器和导航菜单。简而言之，您需要将两个兄弟姐妹浮动以使它们并排。由于没有明显的兄弟姐妹，我建议通过包装您的内容来制作一个。

HTML

<div id="container">
        <header>
            <h1>Index page</h1>
        </header>

        <nav role="navigation" id="nav">
        <ul>
            <li><a class="index" href="index.php">Home</a></li>
            <li><a class="about" href="about.php">About</a></li>
            <li><a class="contact" href="contact.php">Contact</a></li>          
         </ul>
        </nav>
        <div id="content">
            <div id="main" role="main">
                <p>This is the index page</p>
            </div>

            <footer>
                <p>This is the footer</p>
            </footer>
         </div>
    </div>

CSS

#content,#nav{
    float:left;
}

工作示例 http://jsfiddle.net/vmr95/

于 2013-06-19T08:36:34.430 回答
0

你的问题不是很清楚。容器里面的菜单代码是写的。我猜你的意思是名为main的div 。如果是这种情况，那么您可以添加

#main{ float:left; }

并相应地调整页脚。

于 2013-06-19T08:46:42.990 回答