Question

我有一个只有文本字段和按钮的表单。它们位于同一行，首先是texttfield，然后是右边的按钮。问题是，按钮会根据其上的标题进行扩展，文本字段必须填充其余部分。为了达到这个目的，我使用了这样的东西：

<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顺序混乱。标签时，首先按钮会在焦点上，然后是文本字段，但我需要将textfield作为第一个。

注意：我无法将tabindex = 1添加到textfield，并将tabindex = 2添加到按钮，因为此搜索表单之上和之外还有其他元素，tabindex必须从上到下移动。

是否有另一种方法可以按照我想要的方式定位元素或重新排序tabindex。在我的情况下，最好的解决方案是使用其他样式来达到预期效果，但我无法弄清楚如何。

Answer 1

CSS表使用与HTML表相同的算法，除了它与语义无关。它只是以相同的方式呈现。

然后你可以有两个组合的单元格具有100％的宽度，并且每个单元格的内容仍然适应彼此的长度。如果提交按钮较长，搜索输入将会缩短。

这是一个小提琴，展示它：http://jsfiddle.net/4JvRV/1/
如果它在Chrome中不起作用，请告诉我们 兼容性：IE8 +
IE7的后备：IE7和IE6会看到更短的搜索错误的文本输入，完全可以接受恕我直言。或者你可以决定有100％的宽度，如果你愿意，可以在2行显示。

Answer 2

将按钮放在文本字段之后，将文本字段浮动到左侧。

表单项定位问题

2 个答案: