Question

我有多种样式，例如button_50，宽度为50px，button_75，宽度为75px，依此类推......

有没有办法根据文本的长度动态生成按钮的长度，所以我可能只需创建一个样式，如按钮，我可以将其应用于任何按钮，它会缩小或拉伸为基础关于文本的长度。

这是我的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个不同的图像应用于按钮的每个背景位置，以便我可以使用一种渐变，例如，而不是右上角左下方的相同按钮。

Answer 1

您的更改已经澄清了我第一次回复时您想要的内容。

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

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

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

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

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

Answer 2

<asp:button>输出<input type="submit">（给予或接受一些属性）

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

Answer 3

只是不要设置宽度。

更新

如评论中所述，案例使用的是图像，可能是背景。

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

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

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

Answer 4

您可以使用以下循环在页面加载上执行此操作：

// 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;

Answer 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片段来包装带有跨度的按钮并通过css应用样式。如果你不倾向于手动滚动，你可以使用jquery插件。

Answer 6

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

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

干杯！

罗伯特。

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

6 个答案: