适合元素旁边的另一个？

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 }

不是最漂亮的解决方案，但会起作用。

//编辑：VERSION TWO

废弃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>