我有一个表格,我试图在每个单元格的第一行显示两个选项卡。我已将左侧选项卡分成三个图像(左、中、右),并显示一些文本。它应该与左边距对齐。右侧选项卡没有文本,应与右边距对齐。在两个选项卡之间是连接两个选项卡底部的一条线 - 右侧选项卡是一个图像,连接器也是一个图像,所以我要显示五个图像。它还应该拉伸以适应文本(它正在做的)和单元格(它不是)。
它应该看起来像这样:
[文本]__[]
左侧选项卡显示正常,但右侧选项卡不是。这是我的代码:
HTML
<div class='category'>
<span><span><span><span>".$results['category']."</span></span></span></span></div>
<div class='righttab'><span><span></span></span></div>
CSS
.category
{
display: block;
}
.category *
{
height: 27px;
}
.category span
{
display: block;
float: left;
color: rgb(240,208,128);
}
.category span span
{
background: url(tabmiddle.png) top left repeat-x;
float: left;
margin: 0 0 0 0px;
}
.category span span span
{
background: url(tabright.png) top right no-repeat;
float: left;
display: block;
padding-right: 19px;
}
.category span span span span
{
background: url(tableft.png) top left no-repeat;
display: block;
padding-left: 19px;
padding-top: 3px;
}
.righttab
{
display:block;
float: right;
}
.righttab span
{
background: url(topborder.png) top repeat-x;
display: block;
}
.righttab span span
{
background: url(righttab.png) top right no-repeat;
display: block;
float: right;
margin-left: 75px;
}