变量错误标签的正确位置 - Bootstrap / Jquery

Question

我有一个表格，每个输入前面都有一些错误标签 - 在右边。

我可以使用这个来控制每个错误的正确位置：

if(element.attr("name") == "id"){
   error.css( "right", "-95px" );
   }

然后我可以将标签准确地放在每个输入前面 2-3 个像素处。

但是

问题：

• 一些输入有 2 或 3 个不同的错误消息。

• 每个标签都有不同的宽度（因为有些消息比其他消息短）

我可以控制每个宽度：

min-width: 100px;
max-width: 200px;
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
white-space: nowrap;

最小/最大宽度 + 空白（nowrap）。

当我为 ERROR1 放置标签“右 -100px”时 - 消息显示正常 - 输入外部有 2-3 个像素。

当消息更改为 ERROR2（带有较大标签的最大消息）时 - 标签显示在输入内。

如果消息很短，则标签显示在输入之外 10-12 像素处。

这是因为标签向左长而不是向右..

如何选择正确的标签成长方向？

示例：

在屏幕中间放一个点> 今天，最大宽度是从中心到右边。

我怎样才能从中心到左边？

浮动？

这是https://jsfiddle.net/4v2br346/（我认为这是理解问题的更好方法.. :D）

请尝试输入全名。

非常感谢！！

Answer 1

使用margin-left 会对您有所帮助。检查这个

JS

errorPlacement: function (error, element) {
ElementWidth = parseFloat($(element).outerWidth()) + 7;
if (element.attr("name") == "id") {
       error.css("margin-left", ElementWidth + 'px');
}
if (element.attr("name") == "name") {
       error.css("margin-left", ElementWidth + 'px');
}
if (element.length) {
      error.insertAfter(element);
} else {
      error.insertAfter(element);
}
},

DEMO

注意：由于箭头，我将宽度添加了 7 px。