0

2 つの個別の div 内に 2 つの画像を使用して、検索バー用のタブを作成しようとしていますが、何らかの理由で 1 つの画像しか表示されません。どちらか一方。css から home-searchbar-school id をコメントアウトすると、教授タブが表示されます。それ以外の場合は学校のみが表示され、教授タブがあるべき場所に表示されます。Google Chrome の dev ヘルパーで div がどこにあるかを確認すると、適切な場所に表示されるので、困惑しています。

HTMLは次のとおりです。

<div id="home-searchbar">
    <div id="home-searchbar-tabs">
        <div id="home-searchbar-professor" class="home-searchbar-tab">

        </div>
        <div id="home-searchbar-school" class="home-searchbar-tab">

        </div>
    </div>
    <div id="home-searchbar-container">

    </div>
</div>

そしてCSS：

#home-searchbar{
    margin-left: 20px;
    float: left;
    height: 115px;
    width: 980px;
    background-color: green;    
}

#home-searchbar-tabs{
    float: left;
    width: 980px;
    height: 32px;
    background-color: red;
}

.home-searchbar-tab{
    background-color: yellow;
    width: 190px;
    height: 32px;
    float: left;
}

#home-searchbar-professor{
    background: url('../img/searchtabs.png') 0 0  no-repeat;
}

#home-searchbar-professor{
    background: url('../img/searchtabsinactive.png') 0 -64px  no-repeat;
}

#home-searchbar-container{
    float: left;
    width: 980px;
    height: 83px;
    background-color: purple;
}

画像はスプライトです。正しく機能しているので、そのうちの 1 つだけをアップロードします。他の画像は配色が違うだけで同じです。

また、ランダムな小さな質問ですが、div にクラスと id を含めるための適切なスタイルですか? 私はまだCSSについて学んでいるので、それがdivで両方を使用する正しい方法/最適な方法であるかどうか疑問に思っていましたか?

あなたが与えることができる助けやアドバイスをありがとう！

ここに画像の説明を入力

4

2 に答える 2

2

ここに答えがあります：「両方のバックグラウンド css は同じ ID #home-searchbar-professor を使用します」

担当者、あなたの css は問題ありません。

于 2013-01-03T12:09:20.710 に答える
0 
#home-searchbar-professor{
    background: url('../img/searchtabs.png') 0 0  no-repeat;
}

#home-searchbar-professor{
    background: url('../img/searchtabsinactive.png') 0 -64px  no-repeat;
}

両方とも呼ばれるhome-searchbar-professorので、一方の名前をに変更しますhome-searchbar-school

于 2013-01-03T11:57:24.900 に答える