Question

我正在尝试在输入中执行这样的按钮：

buy http://f.cl.ly/items/1X2W1G2c041V2j0S3T0q/Screen%20Shot%202011-08-15%20at%2011.05.51%20PM.png

我可以将其作为<a>（如示例中所示）但不能将其视为<input>，主要问题是+图像是精灵的一部分，当我将精灵添加到输入中它变为输入标记的大小（如示例所示）。有没有办法让它看起来像上面的例子而不编辑精灵？

Answer 1

因为您无法将元素放在<input />标记内，所以您无法使用精灵完成此操作，但您可以使用单个图像。

您可以使用第一个示例，只需使用JavaScript将submit（）动作附加到它。

<a class="contentAddToCart2" href="document.getElementById('#formID').submit();return false;" id="submitButton">Buy Now<span></span></a>

使用jQuery，您可以使用$('#formID').submit(); return false;代替，或者通过点击命令附加它。

DEMO： http://wecodesign.com/demos/stackoverflow-7074339.htm

$( document ).ready( function() {
    $( '#submitButton' ).bind( 'click', function() {
        $( this ).submit();
        return false;
    }
}

Answer 2

如果您将精灵置于彼此而不是彼此相邻，您可以这样做：http://jsfiddle.net/QMgg8/并更改垂直方向精灵在背景中的位置。

跨度的原因是您可以为按钮指定按钮的背景图像。在这个演示中，我把它们变成了黄色，因为我没有你的图像，并且做出了概念验证。您可以使用vertical-position的{{1}} background来选择正确的精灵。目前它设置为.contentAddToCart。

HTML

top

CSS

This is what I want the input to look like:<br/>
<span><a class="contentAddToCart" href="#">Buy Now</a></span>
<br/>
But this is as far as I have been able to figure out:<br/>
<span><input class="contentAddToCart" type="submit" name="Buy" value="Buy Now"></span>

Answer 3

我不明白为什么你不使用输入。您可以将填充和背景图像分配给输入而不会出现任何问题。至于那个精灵，我认为如果你把“槽”放在行而不是列中会更容易处理。

此处示例：http://jsfiddle.net/rre8d/

将输入样式设置为超链接

3 个答案: