自動寬度下拉菜單與輸入文本結合

Question

我有一個輸入文本與Bootstrap的下拉菜單相結合。我使用的輸入，在前面加上如下面的代碼：

<div class="input-prepend"> 
<div class="btn-group"> 
    <button id="btn-cat" class="btn" tabindex="-1" name="category">All</button> 
    <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" id="category-menu"> 
     <li><a href="#">Computers</a></li> 
     <li><a href="#">Cell Phones & Accessories</a></li> 
     <li><a href="#">Magazine Subscriptions</a></li> 
     <li><a href="#">Video Games</a></li> 
     <li><a href="#">Sports & Outdoors</a></li> 
    </ul> 
</div> 
<input type="text"> 

請參考演示在這裏： http://jsfiddle.net/LCdvQ/1/

問題是，當我選擇長菜單項，輸入文本將被移動在右邊。我想要的是像amazon.com上的搜索框一樣的效果。

Answer 1

你想要這樣的東西.. ??

http://jsfiddle.net/LCdvQ/4/

.input-prepend{ 
    border: 1px solid #ccc; 
    width: 500px; 
} 

.text1{ 
    border: 0px!important; 
}