jquery - 居中对齐输入按钮的背景图像

Question

这听起来像是一个简单的修复，但让我详细解释一下。

我有一个 <input type="submit"/>按钮，我试图将箭头对齐到按钮文本的右侧(已经居中对齐)。

这是 fiddle :http://jsfiddle.net/s6rrzsa4/4/

现在开始讨论问题:

1. 我无法更改 <input>到 <button>标签因为它来了来自 CMS)。
2. 按钮文本可以是任何东西，这意味着我无法裁剪箭头具有偏移量的图像(等于文本的宽度)并使用背景位置:中心。
3. 我不能为父 div 添加 :after 伪元素，因为它使箭头区域不可点击。
4. 正如我已经说过的，按钮文本可以改变。所以我不能对背景位置使用百分比。
5. 按钮有固定的宽度(抱歉，忘了加上这点)。

Answer 1

为了找到文本长度，使用了一个虚拟的 span 并使用了一些 javascript 来计算 background-position-x。

var a = $("input").outerWidth();

var s = $('<span class="dummy" />').html($("input").attr('value'));

s.appendTo('body');

var b = s.outerWidth();

var pos = b + (a-b)/2;

$("input").css({
    'background-position': pos +'px center'
});

s.remove();

请检查 fiddle - http://jsfiddle.net/afelixj/s6rrzsa4/9/