CSS无法弄清楚为什么div消失了

时间:2013-01-03 11:48:25

标签: css layout html

我正在尝试使用2个图像在2个单独的div中为搜索栏制作一些标签,但由于某种原因,它只会显示一个图像。非此即彼。如果我从css中注释掉home-searchbar-school id,教授标签显示,否则只有学校会显示,并且它会显示教授标签应该在哪里。当我想看看谷歌chrome的开发助手中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;
}

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

另外一个随机的小问题是,在div中有一个类和id的好风格?我还在学习CSS,所以想知道这是否是在div中使用这两者的正确方法/最佳方式?

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

enter image description here

2 个答案:

答案 0 :(得分:2)

好的,答案是: “两个背景css使用相同的id,#home-searchbar-professor”

ty rep,你的css是好的btw

答案 1 :(得分: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