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