我有一个只有文本字段和一个按钮的表单。它们在同一行，首先是文本字段，然后是右侧的按钮。问题是，按钮会根据其上的标题进行扩展，并且文本字段必须填充其余的位置。为了实现这一点，我使用了这样的东西：
<html>
<head>
<style>
#search_form {
width:500px;
}
#search_button_container {
float: right;
}
#search_field_container {
overflow: hidden;
}
#search_field {
width:92%;
}
</style>
</head>
<body>
<form id="search_form">
<div>
<div id="search_button_container">
<input type="submit" value="Search" id="search_submit" />
</div>
<div id="search_field_container">
<input id="search_field" name="search_field" type="search" />
</div>
</div>
</form>
</body>
</html>
在此标记中，按钮是第一项，但由于页面上的 float=right 它位于右侧，这正是我想要的，但这会使 tabindex 顺序混乱。选项卡时，首先按钮将处于焦点，然后是文本字段，但我需要文本字段是第一个。
注意：我无法将 tabindex=1 添加到 textfield 并将 tabindex=2 添加到按钮，因为在此搜索表单之上和之外还有其他元素，并且 tabindex 必须从上到下移动。
是否有另一种方法可以按照我想要的方式定位元素或重新排序 tabindex。在我的情况下，最好的解决方案是使用另一种样式来达到预期的结果，但我不知道如何。