我希望我的<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;
}
请告诉我如何使左侧导航菜单具有一些好看的格式。
提前感谢…!
将左侧导航菜单旁边的内容换行到新的div
元素中。然后将float:left
添加到该容器和导航菜单中。简而言之,你需要漂浮两个兄弟姐妹,使他们并排。由于没有明显的兄弟,我建议通过包装您的内容来创建一个。