Html 搜索按钮选项卡索引可访问性

我需要把一个输入字段和提交按钮放在同一行。输入字段应为剩余宽度的100%。我发现实现这种跨浏览器功能的唯一方法是：

从可访问的角度来看，此解决方案有一些缺点。主要是因为按tab键从字段移动到按钮不再起作用。不幸的是，我不能只将

tabindex=“1”

添加到字段中，而将

tabindex=“2”

添加到按钮中，因为这样会破坏整个页面的“自然选项卡顺序”

---

所以我想知道是否有其他方法可以解决这个问题而不必使用（目前浏览器支持有限）。由于输入字段可以通过按“return”提交，我可以在按钮上添加一个tabindex=“-1”。但是，或者…

我没有进行跨浏览器测试，但您可以尝试以下方法：

---

谢谢，在每种浏览器中都适用，即使是IE8+。要消除重叠字段/按钮，只需添加

框大小：边框框
<form action="search.php" method="get">
  <input type="submit" name="search" value="Go" style="float: right" />
  <div style="overflow: hidden; padding-right: .5em;">
    <input type="text" name="term" style="width: 100%;" />
   </div>
</form>

<form action="search.php" method="get" style='display:table; width:100%;'>
   <div style="display:table-cell; width: 100%;">
       <input type="text" name="term" style="width: 100%;" />
   </div>
   <input type="submit" name="search" value="Go" style="display:table-cell;" />
</form>