CSS样式和对齐问题

Question

I would like my <div id="container"> to be on the right side of my navigation menu but I am having issues. 我希望我的<div id="container">位于导航菜单的右侧，但是出现问题。

Can anybody please help me out with this. 有人可以帮我这个忙吗？

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

This is what I added to style.css 这就是我添加到style.css中的内容

div.container
{
   float:left;
}

Please let me know how can I make left side navigation menu with some good looking formatting. 请让我知道如何制作具有良好外观的左侧导航菜单。

thanks in advance..! 提前致谢..！

Answer 1

Wrap the content you want beside the left navigation menu in a new div element. 在新的div元素中，将所需的内容包装在左侧导航菜单旁边。 Then add float:left to this container and the navigation menu. 然后将float:left添加到此容器和导航菜单。 In a nutshell, you need to float both siblings to make them side by side. 简而言之，您需要浮动两个兄弟并排。 Since there is not an apparent sibling, I suggesting making one by wrapping your content. 由于没有明显的同级，我建议通过包装您的内容来使其同级。

HTML 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 CSS

#content,#nav{
    float:left;
}

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

Answer 2

Your question is not that clear. 您的问题不清楚。 Inside the container menu code is written. 在容器菜单中写入代码。 I guess you mean div named main . 我猜你的意思是div命名为main 。 If this is the case then you can add 如果是这种情况，则可以添加

#main{ float:left; }

and accordingly adjust the footer. 并相应地调整页脚。

CSS样式和对齐问题

问题描述

2 个解决方案

解决方案1
2 2013-06-19 08:36:34

解决方案2
0 2013-06-19 08:46:42

CSS样式和对齐问题

问题描述

2 个解决方案

解决方案1 2 2013-06-19 08:36:34

解决方案2 0 2013-06-19 08:46:42

解决方案1
2 2013-06-19 08:36:34

解决方案2
0 2013-06-19 08:46:42