我对设计一无所知，我试图让一个简单的 HTML 表单看起来像这样： .
基本上，它是一个带有三个输入字段和一个提交按钮的表单。
关于输入字段，有两个在上面和一个在下面。我希望它们彼此完全居中对齐，并且第二个拉伸到与上面的宽度相同。
关于提交按钮，我希望它与输入字段在水平和垂直方向上完全居中对齐，但要在这些输入字段的右侧。
我不太担心它不能完全跨浏览器。
感谢任何指点！
编辑：我更喜欢用 CSS 完成而不是基于表格。 （我听说基于表格的方法简直是邪恶的。）
【问题讨论】：
这样的纯 CSS 怎么样？顺便说一句……您知道输入字段和搜索按钮的具体尺寸吗？如果我知道一些尺寸，我可能会做得更干净一些。无论如何，看看演示......
<div id="wrap">
<div id="fields">
<input type="text" id="left" />
<input type="text" id="right" />
<div class="clear"></div>
<input type="text" id="bottom" />
</div>
<input type="button" value="Search" id="search-button" />
</div>
#wrap {
min-width: 375px;
position: relative;
}
#fields {
float: left;
position: relative;
}
#left {
height: 15px;
width: 150px;
float: left;
position: relative;
}
#right {
height: 15px;
width: 150px;
margin-left: 5px;
float: left;
position: relative;
}
#bottom {
height: 15px;
width:309px;
margin-top: 5px;
position: relative;
}
#search-button {
position: relative;
left: 15px;
top: 12px;
}
.clear {
clear: both;
}
我希望这会有所帮助。
【讨论】：
<input> 字段的size 属性，该属性根据可见字符数控制输入字段的宽度...我认为:)
你可以使用一张桌子。 :) 这里的代码都准备好了：
<table>
<tbody>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td rowspan="2" style="vertical-align:middle;"><input type="submit" /></td>
</tr>
<tr>
<td colspan="2"><input style="width:100%" type="text" /></td>
</tr>
</tbody>
</table>
【讨论】：