可变宽度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>