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で境界線を使用していて、すべてが適切に配置されていましたが、境界線を削除するとすぐにすべてがバラバラになりました。

フロートが正しくクリアされず、picdivがすべてを台無しにしてしまうことに関係していると思います。私はあなたの提案に本当に感謝します。

ありがとうございました。

4

2 に答える 2

0

「その場所にない」とはどういう意味かわかりませんが、境界線を削除すると、マージンの折りたたみに問題があることがわかります。

その場合は、境界線を削除したルールにoverflow: autoまたはを追加することで解決できます。padding: 1px 0

于 2012-09-15T13:52:05.100 に答える
0

あなたの

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

と

<br id="clear">

または、idからクラスに変更することをお勧めします。そうすれば、複数回使用できます。何らかの理由で、divでは機能しません。しかし、「br」も短いので、とにかくそれを好みます。

于 2012-09-15T13:54:22.447 に答える