Question

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

我有一个<input type="submit"/>按钮，我正在尝试将箭头对齐按钮文本的右侧（已经居中对齐）。

这是小提琴：http://jsfiddle.net/s6rrzsa4/4/ submit button

现在讨论问题：

我不能将<input>更改为<button>标签来自CMS）。
按钮文字可以是任何内容，这意味着我无法裁剪箭头带偏移的图像（等于文本的宽度）并使用背景位置：中心
我无法添加：在父div的伪元素之后，因为它使箭头区域不可点击。
正如我已经说过的按钮文字可以改变。所以我不能将百分比用作背景位置。
按钮的宽度是固定的（抱歉，忘了添加此点）。

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();

请检查小提琴 - http://jsfiddle.net/afelixj/s6rrzsa4/9/

Answer 2

@felix解决方案很好。但是为了计算文本的宽度，将span元素附加到body上有缺点。我们可以使用canvas来计算文本的宽度，但它不会被附加到DOM。

http://jsfiddle.net/s6rrzsa4/16/

var elem = $('input'),
    cs = window.getComputedStyle(elem[0]),
    context =  document.createElement("canvas").getContext("2d"),
    metrics, pos;

    context.font = cs.fontSize + " " + cs.fontFamily;

    metrics = context.measureText(elem[0].value.toUpperCase()), 
    pos =  (elem.width() - metrics.width)/2 + 20;

    elem.css('background-position','calc(100% - '+pos+'px) center');

Answer 3

1）你可以使用：after with style pointer-events: none; 但它在IE http://caniuse.com/#feat=pointer-events

中不受支持

2）在字符串

的末尾添加>符号

Answer 4

听起来你在选择＆＃34; nice＆＃34;时非常有限。的解决方案。

在您的情况下，我能想到的最简单的方法是获取按钮值可能的每个文本可能性的列表，并使用值定位CSS：

div input[value="Anything"] {
    background-position: 200px 30px;
}

这是您更新过的小提琴：http://jsfiddle.net/s6rrzsa4/8/

中心对齐输入按钮的背景图像

4 个答案: