将元素放在另一个旁边？

Question

我试图在文本框旁边放置一个向下的箭头。

jsFiddle example

我怎样才能让箱子紧贴地配合与输入，使得它们的顶部和底部对齐？

必须是获取位置信息的方法是JS/jQuery然后...什么，我应该绝对定位它？

---

编辑：明白了pretty darn close我怎么想。它在IE8中仍然有点...无论如何，我可以推动它？

Answer 1

这绝对不是应该要求JavaScript的东西。

我的第一个建议是尝试使用button或input[type=button]元素，而不是跨度，我总是有更好的运气排列与假的真实按钮的文本框。

这是我看到的时候我的元素转换为按钮：

它不是一个完美的解决方案，但也有一些小的调整，以按钮和文本框的样式，你应该能够使这行得通。请注意，不同的浏览器使用不同的默认样式来呈现表单小部件，因此很难提供一个通用的解决方案，请注意文本框边框的差异。

所不同的是在你原来的例子更富戏剧性：

你一定会想自定义样式应用到文本框，以获得一致的和可预见的结果。

Answer 2

.cb-arrow { 
    cursor: pointer; 
    background: -moz-linear-gradient(center top, 
     rgb(242, 242, 242) 0%, 
     rgb(221, 221, 221) 50%, 
     rgb(207, 207, 207) 100%) 
     repeat scroll 0% 0% transparent; 
    border: 1px solid #707070; 
    -moz-border-radius-topright: 3px; 
    -moz-border-radius-bottomright: 3px; 
    padding: 0 3px; 
    margin-left:-5px 
} 


.combobox { border:1px solid #BBB; padding:2px 2px 1px 2px; margin:0 } 

不是最漂亮的解决方案，但将工作。

//编辑：版本二

废料的JavaScript（现在）。添加一个容器。看起来一切都很好，在一致的FF和Chrome：

HTML：

<div id='container'> 
    <input type="text" class="combobox" /> 
    <button type='button' class='cb-arrow'>&#9660;</button> 
</div> 

CSS：

#container { height:20px;line-height:20px } 

.cb-arrow { 
    border: 1px solid #707070; 
    background:white; 
    margin:0; 
    padding:0; 
    margin-left:-5px; 
    vertical-align:middle; 
} 

.combobox { 
    border:1px solid gray; 
    border-right:0; 
    vertical-align:middle; 
    padding:1px 
} 

Answer 3

似乎在IE和FF工作。我没有铬。

<style> 
#container * 
{ 
    border: 1px solid black; 
    float:left; 
    margin:0; 
    padding:0; 
} 
#container .cb-arrow 
{ 
    height:22px; 
    line-height:22px; 
    width:20px; 
} 
#container .combobox 
{ 
    border-right:0px; 
    height:20px; 
    line-height:20px; 
} 
</style> 
<div id='container'> 
    <input type="text" class="combobox" /> 
    <button type='button' class='cb-arrow'>&#9660;</button> 
</div>