css造型和對齊問題

我想我的<div id="container">位於導航菜單的右側，但我遇到了問題。css造型和對齊問題

任何人都可以請幫我解決這個問題。

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

請讓我知道我可以做左側導航菜單有一些漂亮的格式。

在此先感謝..！

來源

2013-06-19 user1586957

根據你的代碼你必須設置'ul'和'container'的寬度 –

將你想要的內容包裹在新的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-19 08:36:34

您的問題沒有說清楚。在容器菜單中寫入代碼。我想你是指名爲主。如果是這種情況，那麼你可以添加

#main{ float:left; }

並相應地調整頁腳。

來源

2013-06-19 08:46:42 ejo

css造型和對齊問題

回答

相關問題