我可以根据文本的长度动态更改 asp.net 按钮的宽度吗答案

【问题标题】：Can I change the width of an asp.net button dynamically based on the length of text我可以根据文本的长度动态更改 asp.net 按钮的宽度吗
【发布时间】：2009-05-22 15:31:28
【问题描述】：

我有多种样式，例如宽度为 50px 的 button_50、宽度为 75px 的 button_75 等等...

有没有办法根据文本的长度动态生成按钮的长度，所以我可能只需要创建一种类似按钮的样式，我可以将它应用于任何按钮，它会收缩或拉伸关于文本的长度。

这是我的 asp.button 声明：

<asp:Button ID="btnReset" runat="server" Text="Reset" OnClick="btnReset_Click"/>

这是一些样式，其中我有一个小图像，我希望能够根据文本的长度进行扩展和缩小。

.test_button
{
background: url(../images/test/grey-left.png) top right left bottom;
background-repeat:no-repeat;
border-style: none;
font-family: Arial,Helvetica,Sans-Serif;
height: 23px;

}

我将右上角的左下角添加到类中，从而扩展了图像。如何将 4 个不同的图像应用到按钮的每个背景位置，这样我就可以有一种渐变，而不是右上角的左下角的相同按钮。

【问题讨论】：

嗯，我不明白您所说的“将 4 个不同的图像应用于每个背景位置”是什么意思。你追求的是精灵吗？
有点，灰色左图只是一个小图像，应该只出现在图像的左侧，但可以说我有灰色顶部、灰色右侧和灰色-bottom，我想将每个图像应用到同一类中各自的背景位置，在本例中为 test_button
实施起来会非常繁琐。除了按钮之外，您还需要 4 个额外的 div。如果您只有少数几种特定尺寸，我建议为每种尺寸和类别生成一个背景图像，并使用循环设置类别。

标签： asp.net css

【解决方案1】：

当我第一次回复时，您的更改已经阐明了您非常想要的内容。

每个元素只能有一个背景图片*。解决方案是拥有多个背景图像是拥有多个 HTML 元素：

<span class="fake_button">
  <span>
    <span>
      <input type="submit">
    </span>
  </span>
 </span>

然后在您的 CSS 中将图像添加到每个角落的不同角落。

它并不简单或漂亮，但它是拥有多个背景图像的唯一方法。

*我认为 Safari 和 Firefox 的一些夜间版本可以做到这一点，但我怀疑这不是被问到的。

【讨论】：

【解决方案2】：

<asp:button> 输出<input type="submit">（提供或获取一些属性）

在没有其他样式的情况下，像这样的提交按钮应该只是展开以适合其文本。也许你应该看看是什么阻止了这种情况的发生。

【讨论】：

您的代码有点混乱。你能再澄清一点吗？谢谢
我正在设置按钮类的宽度。

【解决方案3】：

只是不要设置宽度。

更新

如 cmets 中所述，此案例使用图像，可能作为背景。

对于动态调整大小的图像按钮，我能想到的唯一事情是使用单独的图像作为按钮左右两端的端盖，然后使用可以重复或足够大的背景图像来解决所有问题尺寸。这将限制中心图像如何淡入末端，可能充其量您可以使用从上到下的渐变。

另一种方法是使用 css/javascript 包/方法，例如 SpiffyCorners。

如果您尝试拉伸图像，则存在像素化的风险，并且您必须使用字体宽度估计值，例如您可以从打印或字体 API 获得的字体宽度。由于并非所有客户端都具有相同字体的风险，这将非常容易出错。

【讨论】：

+1 是的，我们这里没有做winForms，你为什么要尝试设置我想知道的宽度。
我没有设置宽度。我所拥有的是按钮的图像。不必根据按钮的宽度创建 4 个不同的图像和样式，我很好奇我是否可以只创建一个图像并根据文本的长度，图像将在 asp.net 按钮上扩展或缩小。

【解决方案4】：

您可以在 PageLoad 上使用这样的循环来执行此操作：

// set default length
string cssclass = "button_25";
int text_length = button.Text.Length;
int[] sizes = {50, 75};
for (int x = 0; x < sizes.Length; x++)
{
    if (text_length > sizes[x])
        cssclass = "button_" + sizes[x].ToString();
    else
        break;
}
button.CssClass = cssclass;

【讨论】：

这是我想要避免的。我不想创建多个宽度不同长度的按钮并在我的样式表中有多个类。

【解决方案5】：

您可以通过 CSS 为理解它的浏览器添加圆角功能（加上渐变 bg 图像或其他）并为不理解它的浏览器使用 JS 来保持源代码的清洁。

对于 ff/sf/op 只需使用

button{
  background: #ccc (../path/img.gif) left bottom;
  -moz-border-radius: 6px;
  -webkit-border-radius:6px;
  border-radius: 6px;
}

然后对于 IE，包括一个 js 的 sn-p 以用 span 包装按钮并通过 css 应用样式。如果你不喜欢手卷，有很多 jquery 插件可以为你做这件事。

【讨论】：

【解决方案6】：

试试 CSS3PIE。它会让你的生活更轻松...看看我的博客页面：

Internet Explorer 6-8 don’t have CSS border-radius. How to make rounded corners?

干杯！

罗伯托。

【讨论】：