Css 可变宽度div的可变宽度表单？

有没有一种方法（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>

---

<代码> UsReFiels<代码>位于页面宽度为<代码> 60% >代码>的中间，但是，我试图使文本框在<代码> USENFION>代码>中具有相对于<代码> USER信息的一定宽度。上述方法不起作用。想法？

听起来您也应该为搜索输入指定一个百分比宽度

将搜索按钮保持在固定宽度（虽然不是必需的）可能也是一个好主意

编辑：以下是一个示例：

<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>

.widget{宽度：30%}
.widget输入[type=text]{宽度：70%}

我制作

.class

的目的是什么？表单或输入元素？我已经编辑了我的回复以包含一个示例。请注意，这使用了IE6不支持的CSS属性选择器（如果您愿意的话）。我好像遗漏了什么桌子是个问题。有必要吗？添加

.widget输入[type=image]{vertical align:middle}

，看看这是否有帮助。如果没有，请调整该值（尝试顶部，然后是底部）

<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>