Javascript 对齐输入旁边的div

我正在使用Jorn Zaeffer的自动完成查询插件，我想添加一个按钮，该按钮将加载与combobox相同的所有元素

因此，我创建了一个方法，在输入文本旁边放置一个以图像为背景的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();
            }
        });
};

这是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？（我使用的是direction:rtl）

试着用标签标签括起来

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

---

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

更详细地说，我认为你的方法有问题；你应该为正确的工作使用正确的工具。因此，虽然可以通过手动定位来做您想做的事情，但您确实不想陷入这个泥潭：Javascript在这方面是一个糟糕的工具。您可能无法使用一些javascript，但如果您尽可能多地使用HTML+CSS，您的生活会轻松得多—这些工具都是为布局专门设计的。特别是，这意味着首先静态地创建箭头按钮，然后准确地向DOM树添加工作的html，而不是试图通过计算输入的宽度+高度+位置来手动控制布局；您几乎肯定会出错（更不用说当事情变得棘手时，例如使用

溢出：滚动
等）

哦，您可以去掉

标记，只需使用
边距顶部的
使输入
显示：block

一种可能的CSS方法是按宽度0 span（内联元素）跟随按钮，其中包含一个位置绝对（不影响布局）块，显示您想要的任何内容。例如：

要使其作为插件工作，您需要编写javascript在html中创建span和div；css最好位于链接样式表中，但当然也可以使用内联样式。CSS转换当然只是为了好玩。
为了解决这个问题，我取消了绝对位置并在div中添加了display:inline块。然后我只是在输入之前插入，就这样。
确实，您也使用jquery？尝试将输入和div封装在一个容器中，浮动them@Ibu：理想的结果是div将与输入文本对齐。@记者：你说得对，我也在使用JQuery。@Litek：我给了div绝对位置，因为我不想让它出现在dom中。我正在尝试将其与“top”和“left”css参数正确对齐。我有一个输入标记，我希望我添加的所有其他元素都是绝对位置。我添加了一个JSFIDLE，它可能至少具有您想要的大致布局。如果这让您感到困扰（并且不会困扰实际的浏览器），那么也可以将其设置为一个范围。你可以做任何东西，只要你能设计它。我已将JSFIDLE更新为使用span。
<label for="in"><img src=" " /><input name="in" /></label>