0

我有一个非常奇怪的 html 问题。我的主菜单不在它的位置。

<html>
  <head>
    <link rel="stylesheet" href="style5.css" type="text/css">
  </head>
  <body>
  <div id="outer">
    <ul>
      <li class="current"><a href="#">Home</a></li>
      <li><a href="#">content</a></li>
      <li><a href="#">search</a></li>
      <li><a href="#">more</a></li>
    </ul>
    <div id="clear"></div>
  </div>

  <div id="wrapper">
    <div id="pic">
      <img src="logo.png">
      <div id="content">
        <p> Secure Search </p>
      </div>
    </div>

    <div id="forms">
      <form>
        <input type="text" name="submit" size="78" style="font-size:20pt;"/>
      </form>
    </div>
  </div>

  </body>
</html>

这是CSS

body {
  margin: 0;
  padding: 0;
  background-color: white;
}

h1,h2,h3 {
  margin: 0;
  padding: 0;
}

p,ul,ol,li {
  margin: 0;
  padding: 0;
}

#outer {
  background-color: rgb(67,68,71);
}

#outer ul {
  list-style: none;
  margin-left: 5px;
  border-left: 1px solid;
}

#outer li {
  float: left;
}

.current {
  background-color: rgb(56,63,137);
}

#outer a {
  width: 90px;
  display: block;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  color: white;
  border-right: 1px solid;
  padding: 5px;
}

#outer a:hover {
  color: black;
  background-color: white;
}

#outer .current a:hover {
  color: white;
  background-color: inherit;
}

#clear {
  clear: both;
}

#wrapper {
  width: 960px;
  margin: 0 auto;
}

#pic {
  margin-top: 100px;
  margin-left: 389px;
  position: relative;
}

#content {
  position: absolute;
  top: 60px;
  left: 90px;
}

#forms {
  margin-top: 50px;
}

现在你可能会问，为什么在编码的早期阶段我没有注意到我的菜单没有放置。好吧，事情是我在编码期间使用了包装器 div 的边框，一切都到位了，但是一旦我删除了边框，整个事情就崩溃了。

我认为这与未正确清除浮动导致 pic div 搞砸一切有关。我会非常感谢您的建议。

谢谢你。

4

2 回答 2

0

我不知道您所说的“不在其位置”是什么意思，但删除边框表明您在折叠边距时遇到问题。

如果是这种情况，您可以通过添加overflow: auto或添加padding: 1px 0到删除边框的规则来解决它。

于 2012-09-15T13:52:05.100 回答
0

更换你的

<div id="clear"></div>

和

<br id="clear">

甚至更好地将其从 and id 更改为 class。这样你就可以多次使用它。由于某种原因，它不适用于 div。但是“br”也更短，所以我还是更喜欢那个。

于 2012-09-15T13:54:22.447 回答