我正在尝试使用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中使用这两者的正确方法/最佳方式?
非常感谢您提供任何帮助或建议!
答案 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