將元素放在另一個旁邊？

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>