2

現在、タブ メニューにスプライト イメージを使用しています。問題は、画像は表示されていますが、各タブのタイトルがまったく表示されていないことです。タブ内に画像とタイトルをうまく配置するにはどうすればよいですか? 例

これは私が目指しているものです：

ここに画像の説明を入力

これは私が得ているものです:

ここに画像の説明を入力

HTML

<ul>
<li><a href="#tab-1" class="pngIcon sprite-category">1. Category</a></li>
<li><a href="#tab-2" class="pngIcon sprite-description">2. Description</a></li>
<li><a href="#tab-3" class="pngIcon sprite-images">3. Images</a></li>
<li><a href="#tab-4" class="pngIcon sprite-contact">4. Contact Info</a></li>
<li><a href="#tab-5" class="pngIcon sprite-final">5. Final</a></li>
</ul>

投稿タブ.css

.pngIcon {
    padding: 0;
    background-image: url(http://webprolearner.ueuo.com/dropdown-menu/images/tabdetails.png);
    background-repeat: no-repeat;
    height: 32px;
    line-height: 32px;
    text-indent: 40px;
    margin: 0 5px;
    display: block;
}
4

3 に答える 3

3

cssファイルのセレクターを削除するだけwidthです：.sprite-*

あなたのcss：

.sprite-final{  background-position: 0 0; width: 32px; height: 32px; } 
.sprite-category{ background-position: 0 -82px; width: 32px; height: 32px; } 
.sprite-contact{ background-position: 0 -164px; width: 32px; height: 32px; } 
.sprite-description{ background-position: 0 -246px; width: 32px; height: 32px; } 
.sprite-images{ background-position: 0 -328px; width: 32px; height: 32px; }

動作中のCSS：

.sprite-final{  background-position: 0 0; height: 32px; } 
.sprite-category{ background-position: 0 -82px; height: 32px; } 
.sprite-contact{ background-position: 0 -164px; height: 32px; } 
.sprite-description{ background-position: 0 -246px; height: 32px; } 
.sprite-images{ background-position: 0 -328px; height: 32px; }

最終結果：dabbletのデモ

ここに画像の説明を入力してください

CSSコード:(私はいくつかのリファクタリングを行いました）

li a {
    padding: 0;
    background-image: url(http://webprolearner.ueuo.com/dropdown-menu/images/tabdetails.png);
    background-repeat: no-repeat;
    height: 32px;
    line-height: 32px;
    text-indent: 40px;
    padding: 0 5px;
    display: block;
    text-decoration: none;
}

.nav-category    { background-position: 0px -85px; }
.nav-description { background-position: 0px -248px; }
.nav-images      { background-position: 0px -327px; }
.nav-contact     { background-position: 0px -164px; }
.nav-final       { background-position: 0px 0px; }
于 2012-08-03T05:32:49.923 に答える
2

CSSにを追加width: autoします（問題を指摘してくれたKwonに感謝します）。jsFiddleでの作業例。

.pngIcon {
    ...
    width: auto;
}
于 2012-08-03T05:25:09.483 に答える
1

要素の幅を宣言しないことが当面の問題のようです。

于 2012-08-03T05:19:25.093 に答える