菜单选项卡内的空白？

enter image description here

我为每个标签的CSS是：

.tab1 
{ 
    color: white; 
    display: inline-block; 
    height: 110px; 
    width: 234px; 
    background-image: url("../images/first-tab.png"); 
    background-repeat:no-repeat; 
} 

.tab2 
{ 
    color: white; 
    display: inline-block; 
    height: 110px; 
    width: 234px; 
    background-image: url("../images/second-tab.png"); 
    background-repeat:no-repeat; 
} 

.tab3 
{ 
    color: white; 
    display: inline-block; 
    height: 110px; 
    width: 234px; 
    background-image: url("../images/last-tab.png"); 
    background-repeat:no-repeat; 
}

来源

2011-09-21 PD24

-1

内容的HTML您使用的？大多数元素都有默认的填充/边距。在大多数情况下，你将不得不重写这些。尝试“margin：0; padding：0;”删除它们或添加您的html示例。

来源

2011-09-21 08:38:06 JNDPNT

你的制表符是inline-block，而这个处理方式与inline几乎相同，这意味着它们之间的空白符在html源代码中它们之间的空格（空格，制表符或换行符）。

这会给你的 “差距”：

<div class="tab1">Content here</div> 
<div class="tab2">Content here</div> 
<div class="tab3">Content here</div>

这不会：

<div class="tab1">Content here</div><div class="tab2">Content here</div><div class="tab3">Content here</div>

，这也不会：

<div class="tab1"> 
    Content here 
</div><div class="tab2"> 
    Content here 
</div><div class="tab3"> 
    Content here 
</div>

来改变这一状况，更新你的HTML源代码，并删除空白或（更好）改变你的CSS使用block -elements和float:left （至极可能导致其他问题，但那是很难说的，因为你没有带给你的HTML源代码）

来源

2011-09-21 08:39:06 oezi

由于它们内嵌块它们显示它们之间的单一文本空间，如果他们之间有实际的空白在html中，所以要么删除html（丑陋的HTML）中的空格，要么想到另一种解决方案来以这种方式显示元素（例如浮动）。

来源

2011-09-21 08:39:20

菜单选项卡内的空白？

回答

相关问题