Question

这对我来说是最复杂的部分。我在页面中有标签。每个标签都有一个固定长度的背景图像。因此，当选项卡的文本较大时（“排列帮助”），它会在一行中显示“排列”，在下面显示“帮助”。我的目标是在一条线上显示安排和帮助。标签必须可自定义。我正在使用CSS定期标签。

#tabs a {
float:left;
background:url("../images/selection_deselect_bg.jpg") no-repeat right top;
margin:0;
text-decoration:none;
width:105px;
text-align:center;
height:24px;
font-size:12px;
color:#00779c;
font-weight:bold;
text-decoration:none;

}。

在aspx页面中，选项卡的定义如下

 <div id="tabs">
            <ul>
                <span id="Tab1" runat="server">
                    <li id="li1"><a <%=strpage1anchor%> <%=page1display%>><span style="text">
                        <asp:Literal ID="litPage1" runat="server"></asp:Literal></span></a></li>
                </span>

我有一个更大的图像，我可以在选项卡中获取文本的大小。但如何为标签使用更大的图像？如何在运行时使用更改背景。请帮帮我!!非常感谢提前..

Answer 1

white-space:nowrap将解决您的换行问题。

在运行时更改固定宽度选项卡的宽度对我来说有点傻。也许您正在寻找的是min-width风格。

请注意，在大多数浏览器中无法拉伸或缩放背景图像。

Answer 2

尝试使（部分）背景图像可重复。如果你能做到这一点，这是最简单的方法。

否则，你可能不得不在加载时使用JS来比较标签的宽度和图像的宽度，然后相应地采取行动。虽然恕我直言，这对化妆品来说很麻烦。

如何在运行时更改选项卡的背景图像？

2 个答案: