Question

我有一个非常奇怪的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搞乱一切。我非常感谢您的建议。

谢谢。

Answer 1

我不知道你的意思是“不在它的位置”，但删除边框表明你遇到collapsing margins的问题。

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

Answer 2

替换

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

与

<br id="clear">

甚至更好地将它从id更改为类。这样你可以多次使用它。由于某种原因，它不适用于div。但是“br”也更短，所以无论如何我都更喜欢。

菜单不在位

2 个答案: