在输入旁边对齐div

Question

我正在使用Jorn Zaefferer的自动填充查询插件http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/，我想添加一个按钮，它将加载与组合框相同的所有元素。

因此，我创建了一个方法，将带有图像的div作为背景放在输入文本旁边：

var createDownArrow = function (input, request, options) {
    var defaults = {
        downArrowClass: 'autocomplete_DownArrow'
    };
    options = $.extend({}, defaults, options);

    var offset = $(input).offset();
    var width = typeof options.width == 'string' || options.width > 0 ? options.width : $(input).width();
    var element = $('<div/>').addClass(options.downArrowClass).appendTo(document.body).
        css({ position: 'absolute', top: offset.top, left: offset.left + width}).click(function () {
            if (request && typeof request == 'function') {
                request();
            }
        });
};

输入文本具有以下css：

border: 1px solid #888888;
height:15px;
font-weight: normal;
font-size: 12px;
font-family: Arial (Hebrew);
padding:0px;
margin:0xp;

这是div css：

   background-image:url(drop.jpg);
    background-position:top right;
    height:17px;
    width:17px;
    cursor:pointer;

并在html输入中使用此函数：

<br /><br /><br /><br />
<input type="text" id="test" />

我得到了结果：

你可以看到的不是渴望的结果。

如何对齐输入旁边的div？ （我正在使用方向：rtl）

Answer 1

尝试将其标记在标签

中

<label for="in"><img src=" " /><input name="in" /></label>

Answer 2

写下您在html中始终静态包含箭头的示例。当它工作时，用可以生成它的javascript替换箭头的html，你会没事的。

更详细地说，我认为你有一个有问题的方法;你应该使用正确的工具来做正确的工作。因此虽然可以通过手动定位来做你想要的事情，但你真的不想陷入这个泥潭：Javascript是一个糟糕的工具。你可能无法使用一些 javascript来解决这个问题，但是如果你在HTML + CSS中尽可能地做到这一点，那么你的生活将会更加轻松 - 这是为布局明确制作的工具。特别是，这意味着使您的箭头按钮静态首先，然后完全添加适用于DOM树的html，而不是尝试通过计算宽度手动控制布局+高度+输入位置;你几乎肯定会出错（更不用说当事情变得棘手时，例如用overflow:scroll等）。

哦，你可以摆脱<br/>标签，只需使用display:block输入margin-top。

一种可能的CSS方法是按照宽度为0的跨度（内联元素）按钮，其中包含一个绝对（不影响布局）位置，显示您想要的任何内容。例如：http://jsfiddle.net/emn13/nvY2F/

要让它作为插件工作，你可以编写javascript来在html中创建span和div;优选地，css将在链接样式表中，但是当然也可以使用内联样式。当然，CSS过渡只是为了好玩。

Answer 3

为了解决这个问题，我取消了绝对位置并添加了display：inline-block to div。然后我只是在输入之前插入了所有内容。