asp.net - 带有 css 的 asp.net 按钮上的图像图标和文本？

Question

我正在尝试在 asp.net 按钮上显示图像图标和文本。如何把然后彼此相邻？如果增加按钮宽度 Icon 和 text 是分开的。我想绑在一起并增加按钮的宽度和高度。

html

<asp:Button ID="btnLogin" runat="server" CssClass="login" Text="Login" />

CSS

  .login {
          border: 1px solid #868686;
          border-radius: 5px;
          color: black;
          padding: 10px 10px 10px 25px;
          background: url(../Images/arrow_plain_green_E.png) left center no-repeat;
          background-color: #EDEDED;
          width: 100px;
}

我想看到这样的 .

现在我的按钮也显示为平面图像。我想像上面的例子那样显示。

如何做到这一点？

更新

正如@Dai 建议的那样。我是这样得到的 .文字在图像下方显示得很少。我希望两者应该处于中间且相等。

<button runat="server" id="loginButton" type="submit">
       <img src="Images/arrow_plain_green_E.png" alt="" />
       Login
</button>

Answer 1

您不能使用 <asp:Button> 执行此操作(至少不是没有控制适配器:http://msdn.microsoft.com/en-us/magazine/cc163543.aspx)因为<asp:Button>呈现 <input type="submit">而你想要的效果是用 <button><img src="foo" /> Login</button 实现的>

有一个解决方法，使用 <button runat="server">相反，它支持 ServerClick事件。但是请注意，Internet Explorer 6、7 和 8 不遵守 value=""属性，IE 9 及更高版本 - 这意味着 ServerClick这些浏览器不会引发事件。

您的标记如下所示:

<button runat="server" id="loginButton" type="submit">
    <img src="Images/arrow_plain_green_E.png" alt="" />
    Login
</button>

服务器端:

this.loginButton.ServerClick += new EventHandler(loginButton_ServerClick);

private void loginButton_ServerClick(Object sender, EventArgs e) {

    // do stuff

}