导航栏缩放问题

Question

导航栏缩放问题

5

我有一个问题，我的导航栏似乎与CSS中的.container一起缩放。现在，我是个新手，但我尝试过在CSS中修改值，但没有成功。以下是HTML和CSS的代码：

* {
  margin: 0px;
  padding: 0px;
}
body {
  font-family: verdana;
  background-image: url(images/bg2.jpg);
  max-width: 100%;
  max-height: auto;
  background-position: 0px 100px;
  background-repeat: repeat-x;
  background-color: black;
  background-size: 100%;
}
#header {
  background-color: #000000;
  height: 100px;
  width: 100%;
}
.container {
  background-color: grey;
  width: 960px;
  height: auto;
  margin: 0 auto;
  color: rgb(200, 200, 200);
}
#logoArea {
  width: 300px;
  height: 100px;
  background-image: url(images/logo.png);
  float: left;
  display: block;
}
#navArea {
  height: 50%;
  float: right;
}
#nav {
  list-style: none;
  margin-top: 5%;
}
#nav a {
  color: #C8C8C8;
  text-decoration: none;
  width: 75px;
  height: 50px;
  display: table-cell;
  vertical-align: middle;
  padding: 0;
}
#nav li {
  width: 75px;
  height: 50px;
  float: left;
  margin-left: 30px;
  background-color: #252525;
  border: 2px solid silver;
  border-radius: 8px;
  padding: 0px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
#nav li:hover {
  background-color: grey;
}
.page {
  background-color: rgba(19, 19, 19, 0.9);
  padding: 20px;
  padding-bottom: 1px;
}
p {
  margin-bottom: 20px;
}

.box1 {
  position: relative;
  width: 300px;
  height: 100px;
  background-image: url(images/logo.png);
  background-repeat: no-repeat;
  float: left;
}
 
#imageLogo {
  width: 960px;
  height: 324px;
  background-image: url(images/Triicell-logo.png);
  background-repeat: no-repeat;
  background-position: center;
}

<html>

<head>
  <meta charset="UTF-8">
  <title>Test site</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body a link="#C8C8C8" vlink="#C8C8C8" alink="#C8C8C8">
  <div id="Header">
    <div class="container">
      <div class="box1">
        <a id="logoArea"></a>
      </div>
      <div id="navArea">
        <ul id="nav">
          <li>wp_1
          </li>
          <li>wp_2
          </li>
          <li>wp_3
          </li>
          <li>wp_4
          </li>
          <li>wp_5
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="mainArea">
    <div class="container page">
      <div id="welcome">Test site</div>
    </div>
  </div>
</body>

</html>

正如我所说，我是一个新手，因此如果有什么明显的问题被我忽略了，如果您能指点我，我将不胜感激。我一整个上午都在费尽心思地想这可能是什么原因。

以下是一些屏幕截图，以便参考我所说的内容：

缩放 .container 前：

缩放 .container 后：

我所做的缩放操作是将 .container 的宽度改为 50%；不必担心其他任何事情 - 我知道我打算如何缩放其他部分，例如图片等 - 但只有导航栏似乎跳出了位置。

但是，如果有人能帮助我解决这个问题，我将非常感激。如果失败，请至少指点我一下正确的方向。

- Derek Simmons

请问，你能否详细解释一下你试图实现的目标？另外，如果你删除掉与问题直接相关的CSS/HTML部分，会有助于其他人给出答案。 - Salketer

@ Derek，扩大规模是什么意思？ - vivekkupadhyay

当然。我希望导航栏保持在容器顶部的位置（即深灰色区域）。我会检查代码并进行修改。而所谓的缩放，是指元素的大小会根据所显示的分辨率而改变。但我认为导航栏不需要缩放，这只是一个位置问题。 - Derek Simmons

这是您正在寻找的JSFiddle吗？ - vivekkupadhyay

@DerekSimmons "抱歉，显然我需要10个声望才能发布多个链接。"拥有10+的声望后，你就可以发布链接了，对吧？ - Vignesh Pichamani

我已经添加了图片来展示我的意思。请查看我的主贴。 - Derek Simmons

4个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Derk · Answer 1

非常感谢您让问题更加易于理解，问题是如果您将容器大小设置为50％，那么由于#logoArea宽度过大，已经没有足够的空间容纳导航，因此会将其推到下一行，如果您想要它正常工作，您应该减小#logoArea和/或#navArea的宽度。希望这可以帮到您。

- Derek Simmons · Answer 2

啊...我知道问题出在哪里了。导航栏的房地产不够，无法将其定位到我想要的位置。你看，导航栏旁边应该有一个标志，但是自从删除它后，即使缩放后，导航栏现在也在我想要的位置。

现在唯一的问题就是找出如何缩放导航栏本身（即使导航栏根据显示分辨率而改变大小），但我认为这是另一天的战斗。

感谢所有为这个问题做出贡献的人。我知道我的愚蠢总会让我受益。尽管如此，还是谢谢。

- kushal kant · Answer 3

你需要清除浮动

为此，你可以在#Header后添加.clear类。

.clear{
     clear:both;
}

或者在 Header 中添加 .clearfix 类。

#clearfix:after {
   clear: both;
   content: "";
   display: block;
}

那么你可以轻松地管理.container的宽度，例如50%或其他宽度。

还有像这样的一些HTML代码错误-

 <li>wp_1</a>
          </li>

应该是这样的 -

 <li>
    <a href="">wp_1</a>
 </li>

我希望这能帮助你实现你想要的目标。

- danjah · Answer 4

由于 #navArea 嵌套在 #Header 中，你需要将 #navArea 从页面的自然流程中移除，才能实现你想要的效果。

这大致是这样的；

#navArea {
  position: absolute;
  top: 20px;
  right: 20px;
}