0

イメージ スプライト自体は悪ではありません。ただし、これらを順不同のリストで機能させるのは困難です。さらに一歩進んで、これを水平unordered listに表示しようとする(実際の例>> HERE << ) ことは確かに謎です。

ここに私の jsFiddle プロジェクトがあります: jsFiddle: hNJmD

何かが機能するたびに、アプリ用にカスタマイズするために最小限の編集を行うと、それが壊れてしまうようです。

  • CSS ファイル内の項目が宣言されている順序は重要ですか?
  • <ul>タグはタグの前に定義する必要があり<li>ますか?
  • height:の前に指定する必要がありますwidth:か? （私は通常、アルファベット順にリストしようとしているので、誤って重複することはありません）

スプライトとして使用している画像は次のとおりです。

スプライト

私の目標：

  • メニューをページの水平方向の中央に配置する
  • 画像全体を表示する (すべて 50 ピクセル)
  • アクティブなアイテムのa.hover効果を無効にする(リンク 1 )

CSS は次のとおりです。

#nav {
  text-shadow: 4px 4px 8px #696969;
  white-space:nowrap;
  vertical-align: middle;
}
#nav ul {
  list-style-type:none; /* removes the bullet from the list */
}
#nav li {
  display: inline-block;
  text-align: center;
  height: 50px;
  width: 192px;    
}
#nav a {
  background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
  display: block;
  color:Blue;
}
#nav a:hover {
  background-position: 0 -50px;
  color:Red;
}
#nav .active, a:hover {
  background-position: 0 0;        
  color:Black;
}
#nav span {
  top: 15px;
  padding-left: 5px;
}
​

jsFiddle で使用される HTML は、ここでも繰り返されます。

<body>
  <div>
    <ul id="nav">
      <li>
        <a class="active" href="#">
          <span>Link 1</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>Link 2</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>Link 3</span>
        </a>
      </li>
    </ul>
  </div>
<br/>
<br/>
<br/>
<br/>
<div style="text-align:center;">
  <p>REFERENCE: Sprite (Width: 192, Height: 150):</p>
  <img src="http://i.imgur.com/Sp7jc.gif">
</div>
</body>​

誰かがこのクレイジーなことを機能させる方法を教えてもらえますか?

4

1 に答える 1

1

次のようにしたい場合: jsFiddle example、これが私がしたことです:

  • 同じものを参照しているため、ルール#navとルールを組み合わせました。#nav ul
  • 私が追加margin:0 auto;したそのルールにwidth:600px;、アイテムを中心に置くもの
  • 次に、#nav aを追加display: block;しましheight:50px;た。これにより、リンクが適切な高さを占めることができます。
  • 最後に、アクティブな要素にのみ影響するルールを追加した#nav .active:hoverので、変更されたようには見えません。

また、CSS ルールの順序が重要かどうかについての質問の 1 つに答えると、答えは「はい」と「いいえ」です。ルールの幅と高さに関しては、順序は関係ありませんが、ルールの具体性と同様に、ルールが表示される順序は重要です。

于 2012-09-20T21:05:06.547 に答える