2

CSS に小さな設計上の問題があり、誰かがそれを調べてくれるかどうか知りたいです。設計上の問題は、水平ナビゲーションのロールオーバー効果にあります。ある種のマージンまたはパディングが追加されているようですが、css で問題を見つけるのに苦労しています。以下に使用しているコードを貼り付けますので、自分で確認してください。ナビゲーション リストの項目をロールオーバーするまで、問題を確認することはできません。

HTML:

    <div class="Horiznav">
  <ul>
    <li id="active"><a href="#">Link #1</a></li>
    <li><a href="#">Link #2</a></li>
    <li><a href="#">Link #3</a></li>
    <li><a href="#">Link #4</a></li>
    <li><a href="#">Link #5</a></li>
  </ul>
</div>

CSS:

.Horiznav {
  background: #1F00CA;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
}
.Horiznav ul {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #fff;
  text-Align: center;
  margin: 0;
  padding-top: 5px; padding-bottom: 5px;
}
.Horiznav ul li {
  display: inline;
}
.Horiznav ul li a {
  padding-top: 5px;
  padding-bottom: 5px;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid #fff;
}
.Horiznav ul li a:hover {
  background: #16008D;
  color: #fff;
}
#active a { border-left: 1px solid #fff; }
4

2 に答える 2

5

li要素がdisplay:inlineあるため、問題 (各メニュー/リスト項目の左側にある余分なギャップ) は、HTML マークアップの空白の結果です。次のいずれかを実行できます。

A - HTML の空白を取り除きます。

<ul><li id="active"><a href="#">Link #1</a></li><li><a href="#">Link #2</a></li><li><a href="#">Link #3</a></li><li><a href="#">Link #4</a></li><li><a href="#">Link #5</a></li></ul>

B - または、次のfont-size:0トリックを使用します。

コンテナに設定font-size:0し、これを子要素でulオーバーライドします。font-size:whateverli

.Horiznav ul {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #fff;
  text-Align: center;
  margin: 0;
  padding-top: 5px; padding-bottom: 5px;
  font-size: 0;       /* #1 */
}
.Horiznav ul li {
  display: inline;
  font-size: 16px;    /* #2 */
}

http://jsfiddle.net/EZSvC/4/

C - または、フローティング レイアウトを使用します。

li要素をフロートし(暗黙的にブロックとして表示されます)、ulコンテナーのフロートを でクリアしoverflow:hiddenます。ただし、コンテナの幅を指定して、margin:0 auto中央に配置する場合は適用する必要があります。

http://jsfiddle.net/EZSvC/5/

于 2012-11-22T09:15:53.787 に答える
0

cssの「Horiznavullia」に「display：inline-block」を追加するだけです

.Horiznav ul li a {
  padding-top: 5px;
  padding-bottom: 5px;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid #fff;
  display:inline-block;
}

これがjsFiddleファイルです

これで問題が解決することを願っています。

于 2012-11-22T04:41:40.270 に答える