0

我正在尝试通过在 2 个单独的 div 中使用 2 个图像来为搜索栏制作一些标签，但由于某种原因，它只会显示一个图像。非此即彼。如果我从 css 中注释掉 home-searchbar-school id，则会显示教授选项卡，否则只会显示学校，并且会显示教授选项卡应该在的位置。当我查看 div 在 google chrome 的开发助手中的位置时，它会在正确的位置显示它们，所以我有点难过。

这是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;
}

这些图像是精灵，它们工作正常，所以我只会上传其中一个。另一个图像是相同的只是不同的配色方案。

还有一个随机的小问题，在 div 中有一个类和 id 是不是很好？我仍在学习 CSS，所以想知道这是否是在 div 中使用两者的正确方式/最佳方式？

非常感谢您提供的任何帮助或建议！

在此处输入图像描述

4

2 回答 2

2

好的，这是答案：“两个背景 css 都使用相同的 id，#home-searchbar-professor”

ty代表，你的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 回答