可変幅divの可変幅フォーム？

Question

私は、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>