1

私は学校のウェブサイトをやっていて、うまくいっています。私が立ち往生している唯一の問題は次のとおりです。さまざまなサイズの画面でナビゲーションバーのサイズが変更されます。ズームアウトするとすぐにわかりますが、別の画面ではわずかにずれています。

ここに私が言いたいことのスクリーンショットがあります : https://docs.google.com/a/g.ccsd.net/file/d/0B_Sda_-LouAKbnVKVHhMSW5yeXc/edit?usp=sharing問題、規模によってはかなり動き回ります。上記画像は一例です。

これは私のCSSです：

ul {
  font-family: 'Open Sans', Times;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: right;
  z-index: 150;
  /* min-width: 739px;
  max-width: 739px; */
}
ul li {
  display: block;
  position: relative;
  float: right;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 7px solid #CC4D4D;
  padding: 25px 26.45px 30px 26.45px; /*top right bottom left*/
  background: #333333;
  margin-left: 0px;
  white-space: nowrap;
}
ul li a:hover { background: #757575; }
li:hover ul {
  display: block;
  position: absolute;
}
li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #757575; }
li:hover li a:hover { background: #757575; }

これは私のHTMLです：

<ul id="menu">
  <li><a href="showcase.html">Showcase</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="faq.html">FAQ</a></li>
  <li><a href="faculty.html">Faculty</a>
    <ul>
    <li><a href="ro.html">Mrs. Rosarita Olvina</a></li>
    <li><a href="cp.html">Mrs. Christine Pavesich</a></li>
    <li><a href="fv.html">Mr. Francisco Virella</a></li>
    <li><a href="fv.html">Mrs. Susan Williams</a></li>
    </ul>
  </li>
  <li><a href="programs.html">Program Areas</a>
    <ul>
    <li><a href="graphics.html">Graphic Design</a></li>
    <li><a href="photography.html">Photography</a></li>
    <li><a href="video.html">Video Production</a></li>
    <li><a href="animation.html">Animation</a></li>
    <li><a href="art.html">Art</a></li>
    </ul>
  </li>
  <li><a href="about.html">About</a>
    <ul>
    <li><a href="whatwedo.html">What We Do</a></li>
    <li><a href="wherewego.html">Where We Go</a></li>
    </ul>
  </li>
  <li><a href="default.html">Home</a></li>
</ul>

助けてくれてありがとう。

***私は最初の答えを試しましたが、うまくいきませんでした。

4

1 に答える 1

2

問題は必ずしもメニュー内にあるとは限りません。むしろ、メニュー全体 (またはそのコンテナー) を適切に配置する必要があります。

あなたが与えたコードからわかる限り、フロートもこれを修正する役割を果たしている可能性があります。メニュー全体とネストされた UL はフローティングです。私の提案は、これらのフロートを避け、代わりに「display: inline-block」を使用して水平方向の配置を取得することです。

このようにメニュー エントリを合理化した後、メニュー コンテナ全体を周囲の HTML に適切に配置できます。

まだ使用していない場合: Firebug または Chromebug プラグインは、このようなエラーを識別するのに非常に便利です。

于 2013-09-11T20:01:19.170 に答える