Question

如何使导航栏右侧显示的更改内容与之对齐，同时确保左侧的导航栏保持静态？这是我的主页和我的CSS文件的代码：

＆＃13;

html {
  color: #333;
}

body {
  font-family: Arial, Verdana, Garamond;
  background: #ccc;
  margin: 0;
}

#header {
  width: 100%;
  height: 230px;
  border-bottom: 1px solid #000000;
  background: #CCCCCC;
}

#logo {
  float: left;
  width: 600px;
  height: 60px;
  margin: 10px;
  background#ccc;
}

#top_info {
  float: right;
  width: 40px;
  height: 40px;
  background: #CCCCCC;
  border: 1px soild #c7c7c7;
  margin: 30px;
  color: #E00000;
  font-size: xx-large;
  text-align: center;
}

a {
  text-decoration: none;
  font-size: x-large;
  color: #000000;
}


/*This makes the color Black appear for the available menu options */

a:hover {
  background: black;
  color: #E00000;
}


/*This makes the color red appear when the user hovers over the available menu options */

#navbar {
  height: 20px;
  clear: both;
}


/*This makes the navigation bar*/

#navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}


/*This makes the navigation bar list*/

#navbar ul li {
  float: left;
  padding: 0 0 0 20px;
  clear: both;
}


/*This makes the navigation bar options*/

#right_content {
  float: right;
  width: 390px;
  height: 200px;
}

＆＃13;

<!DOCTYPE HTML>
<html>

<head>
  <title>Manga</title>

</head>

<body>
  <link rel="stylesheet" type="text/css" href="Mangastyles.css" />

  <div id="header">
    <div id="logo">
      <img src="Manga-logo.png" width="250" height="200" alt="J-Manga" </div>

      <div id="top_info">Manga: Japanese Comic Books</div>

      <div id="navbar"></div>
      <ul>
        <li><a href="Manga.html">[ Home ]</a></li>
        <li><a href="Form.html">[ Form ]</a></li>
        <li><a href="Pictures.html">[ Pictures ]</a></li>
        <li><a href="Audio.html">[ Audio ]</a></li>
        <li><a href="Video.html">[ Video ]</a></li>
      </ul>

      <div id="right_content">
        <p> Manga are comics created in Japan or by creators in the Japanese language, conforming to a style developed in Japan in the late 19th century. They have a long and complex pre-history in earlier Japanese art.</p>
        <p> In Japan, as in other parts of the world, people of all ages read manga. The medium includes works in a broad range of genres some of which include: comedy, business, historical drama, adventure, science fiction and fantasy, and many others.</p>

      </div>
    </div>
</body>

</html>

＆＃13;

如何使更改的内容与导航栏保持一致？

0 个答案: