Question

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

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

的index.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>

nav.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>

的style.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;
}

请告诉我如何制作左侧导航菜单，其中包含一些外观精美的格式。

提前谢谢..！

Answer 1

将左侧导航菜单旁边的内容换行到新的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/

Answer 2

你的问题不是那么清楚。在容器内部编写菜单代码。我想你的意思是div命名为 main 。如果是这种情况，那么您可以添加

#main{ float:left; }

并相应地调整页脚。

css样式和对齐问题

2 个答案: