Question

我有一个问题，我的导航栏似乎与CSS中的.container一起缩放。现在，我是一个相当新手，但我已经尝试搞乱CSS中的值，但无济于事。这是HTML和CSS的代码：

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

正如我所说的，我是一个新手，所以如果我错过了一些非常明显的东西，如果你能指出我正确的方向，我会感激不尽。我整个上午一直绞尽脑汁，试着想想它会是什么。

以下是一些参考我正在谈论的内容的截图：

在缩放.container之前：

缩放.container之后：

我正在做的缩放它是我将.container的宽度更改为50％;。不要担心别的事情 - 我知道我将要做些什么来缩放其余部分，即图像等等 - 但它只是导航栏似乎跳出了原位。

但是，是的，如果有人能帮我解决这个问题，我会非常感激。如果做不到这一点，至少指出我正确的方向。

Answer 1

你需要清除花车

为此，您可以在.clear之后添加#Header课程。

.clear{
     clear:both;
}

或在.clearfix

中添加Header课程

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

然后，您可以轻松管理.container宽度50%或其他任何内容。

这是你的html代码中的一些错误，如 -

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

应该是这样的 -

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

我希望有助于实现你想要的目标。

Answer 2

嘿谢谢你让你的问题更容易理解，问题是，如果你把容器变成50％，那么导航器就没有剩余空间了，因为#logoArea的宽度要大得多它将导航推送到下一行，如果你希望它工作，你应该减少#logoArea和/或#navArea的宽度。我希望这会有所帮助。

Answer 3

啊......我明白这里有什么不对。导航栏没有足够的空间可以将它放置在我想要的位置。你看，导航栏旁边应该有一个标识，但是除了它之外，导航栏现在就是我想要它的地方，即使在缩放之后也是如此。

现在唯一的事情就是找出如何缩放导航栏本身（即使导航栏根据显示的分辨率改变大小），但我认为＆＃39 ;争取另一天。

感谢所有为此问题做出贡献的人。我知道我的愚蠢会以某种方式让我变得更好。不过，谢谢你。

Answer 4

由于#navArea嵌套在#Header内，您必须从页面的自然流中移除#navArea才能实现您的目标。

这看起来像是;

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

导航栏缩放问题

4 个答案: