动态胶标签作出的图像
-
05-07-2019 - |
题
我想添加一个标签给我的网页,该网页是这样的:
使用 这个例子 作为一个基础,我已经得到了部分工作。我的情况不同,因为我想要的文字部分是固定的,但尾部分的动态调整采取了其他标签是容器。
它看起来不错在即6,但并不真正需的全宽容器。在火狐3它不渲染以及在所有: (红色是一个空白的地区之间跨度).
我怎么得到这个正确呈现在这两个IE6和Firefox采取了充分的指定用于宽度#标签?#Tab4是该地区的我想大小采取尽可能多的房间作为可能。
<style type="text/css">
#Tab
{
width: 300px;
}
#Tab1
{
background: #000 url(BlueTabSprite.png) no-repeat 0 -136px;
display: inline-block;
height: 23px;
padding-left: 4px;
}
#Tab2
{
background: #000 url(BlueTabSprite.png) repeat-x 0 -242px;
display: inline-block;
overflow: hidden;
padding-top: 4px;
height: 19px;
width: 100px;
}
#Tab3
{
background: #000 url(BlueTabSprite.png) no-repeat right -30px;
display: inline-block;
height: 23px;
padding-right: 6px;
}
#Tab4
{
background: #000 url(BlueTabSprite.png) repeat-x 0 -83px;
display: inline-block;
height: 23px;
width:60%
}
#Tab5
{
background: #000 url(BlueTabSprite.png) no-repeat right -189px;
display: inline-block;
height: 23px;
padding-right:6px;
}
</style>
<div id="Tab">
<span id="Tab1">
<span id="Tab3">
<span id="Tab2">Test Tab</span>
</span>
</span>
<span id="Tab5">
<span id="Tab4"></span>
</span>
</div>
解决方案
这是一个有效的简化版本:
<div style="background: url('BlueTabSprite.png') no-repeat; width: 290px; min-width: 120px; max-width: 290px; height: 23px;">
<div style="float: right; background: url('BlueTabSprite.png') top right no-repeat; width: 10px; height: 23px;"></div>
Test
</div>
不隶属于 StackOverflow