可變寬度div的可變寬度形式？

Question

有沒有一種方法（CSS），以確保文本框和搜索按鈕的大小不同時div？

這是我的搜索欄的樣子：

<div class="userinfo"> 
    <form><table id="search" border="0"><tr> 
      <td valign="top"><input type="text" name="search"></td> 
      <td valign="top"><input type="image" name="search-button" src="img/search.png"></td> 
    </tr></table></form> 
</div> 

而且userinfo：

.userinfo { 
    width: 60%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 5px; 
} 

.userinfo input[type=text] { 
    width: 70% 
} 

userinfo謊言在頁面中間用60%的寬度，但是，我想將userinfo內的文本框設置爲相對於userinfo具有一定的寬度。以上不起作用。想法？

Answer 1

聽起來你應該爲搜索輸入指定一個百分比寬度。

將搜索按鈕保持在固定寬度（儘管不是必需的）也是一個好主意。

編輯：下面是一個例子：

<div class="widget"> 
    <input type="text" name="query"> 
    <input type="submit" name="search" value="Search"> 
</div> 

<style> 
    .widget { width: 30% } 
    .widget input[type=text] { width: 70% } 
</style>