将div对齐输入

我正在使用Jorn Zaefferer的自动完成查询插件http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/，我想添加一个按钮，它将加载与combobox相同的所有元素。将div对齐输入

所以，我创建了把一个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）

来源

2011-05-25 Naor

期望的结果是什么？ – Ibu 2011-05-25 08:13:27

这是真的，你也使用jQuery？ – reporter 2011-05-25 08:14:01

尝试将输入和div封闭在一个容器中，将它们浮动 – Litek 2011-05-25 08:14:30

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

来源

2011-05-25 19:17:59 Naor

尝试封闭在标签标记

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

来源

2011-05-25 08:36:32

我有一个输入标签，我想要添加的所有其他元素都是绝对定位的。 – Naor 2011-05-25 08:39:56

已更新问题 – Naor 2011-05-25 09:29:48

写你的例子，静态包括在HTML中，所有时间的箭头。当这个工作，取代箭头的HTML可以生成它的JavaScript，你会没事的。

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

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

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

为了使它成为一个插件，你需要编写javascript来在html中创建span和div;最好这个css应该在一个链接的样式表中，但是当然你也可以使用内联样式。当然，CSS过渡只是为了好玩。

来源

2011-05-25 08:47:17

那么你究竟有什么建议？ – Naor 2011-05-25 09:09:37

问题已更新。 – Naor 2011-05-25 09:30:02

我已经添加了一个jsfiddle，可能至少具有您想要的布局。 – 2011-05-25 09:46:24

将div对齐输入

回答

相关问题