は、インラインアイテムを保持する必要があるが、ディスプレイを使用する必要があります：divタグを持つブロック

Question

これはかなりイライラさせられる...

は基本的に私は、サイト上のメニューバーを作成していて、どこホバー効果を持つようにCSSスプライトを使用していました画像上にマウスを置くと画像が変わります。これは正常に動作していますが、私はdisplay：blockを使用する必要があるため、複数の画像をインラインで表示することはできません。ここ

は、CSSコードの一部は、私が持っている：

.x a {display:block; width:100px; height:100px; overflow:hidden;} 
.x a:hover img {margin-left:-100px;} 
/* ie6 needs this fix*/ 
.x a:hover {zoom:1;} 

をしてから、ここでのPHPファイル内のコードである（これはWordPressのテーマの一部だ、header.phpのファイルに行くこのビット）：

<div class='x'><a href='#' alt='#'><img src='#' /></a></div> 

注：使用される画像が水平スプライトであるので、2枚の画像（100×100は、200x100になって）一つに合併。

これだけでは正常に動作しますが、私はそれのように何かを追加する場合、その後：

<div class='x'><a href='#' alt='#'><img src='#' /></a></div> &nbsp; 
<div class='x'><a href='#2' alt='#2'><img src='#2' /></a></div> 

それは新しい行に行くことができます。私はそれがラインでオーバーフローしているパディングの問題かもしれないと思ったが、私はちょうど2つの画像（210px多分占められた総面積）をやってみたが、それは911pxコンテナエリアにあり、まだ新しいラインに行く。

私は、<スパン>タグ、テーブル、インラインブロック、および他のいくつかのものを使用しようとしましたが、まだ成功しませんでした。私はそれをインラインにしておきましたが、イメージは他のすべての下に正しい水平位置にあるが間違った垂直位置に置かれていました。

目的は、メニューバーのすべての行に約8枚の100x100イメージを持ち、それぞれの間に1つのスペースを911pxの幅のコンテナに入れます。それらはすべて「x」クラスに入れられます。その結果、上に乗ったときに画像が変化します。

非常に書いて申し訳ありませんが、明らかにしたいと思いました。助けてください！

Answer 1

divはブロックとしてレンダリングされているため、イメージは互いに隣り合っていません。

私はあなたが

.X {表示：インラインブロック}ルールを追加し、正常に達成しようとしているかを理解した場合

はあなたがやりたいだろう。

私はそれを試してみることJSFiddleをした：http://jsfiddle.net/XZWzW/