表单项目的问题

-1

我有一个只有文本框和按钮的表单。他们在同一行，首先来到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>

在这个标记的按钮是第一个项目，但由于浮=右它位于右侧，这正是我想要的网页上，但这会混淆tabindex顺序。当标签，首先按钮将在焦点，然后是文本框，但我需要文本框是第一个。

注：我不能将tabindex = 1添加到textfield，tabindex = 2添加到按钮，因为上面还有其他元素，并且超出此搜索表单，并且tabindex必须从上到下移动。

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

来源

2012-04-16 Hayk

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

来源

2012-04-16 21:34:30

也许我没有清楚地解释自己。我想要右边的按钮，靠近表单右边框，文本框必须填充左边的剩余空间。您可以复制我发布的代码，并在按钮标题上添加更长的文本（更改值属性），您将明白我想要的内容。 – Hayk 2012-04-16 21:43:42

我会让按钮固定宽度，即使这显然不是你想要的。对不起，我在这里没有答案。我可以说的是，我认为用'overflow：hidden'隐藏部分文本输入是个坏主意，而且我还必须说，不使用tabindex就能使tab选项正确的唯一方法是首先将输入放入文档中。 – 2012-04-16 22:13:26

无论如何，谢谢您参加讨论。 – Hayk 2012-04-16 22:31:33

CSS表格使用与HTML表格相同的算法，除非它与语义上无关。这只是渲染视觉上相同的方式。

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

这里有一个小提琴证明它：http://jsfiddle.net/4JvRV/1/
让我知道，如果它没有在Chrome中工作。
兼容性：IE8 +
回退为IE7-：IE7和IE6将看到一个较短的扣机...犯错文本输入，完全可以接受的IMHO。或者你可以决定有100％的宽度，如果你愿意，可以在两行上显示它们。

来源

2012-04-16 22:21:44 FelipeAls

谢谢，但我必须支持IE7及更高版本。 – Hayk 2012-04-16 22:29:19

我已经指出了IE7的回退，这似乎完全可以接受。它不会妨碍任何人使用表单输入。但是如果你需要在IE7中进行像素完美的渲染，那么告别语义并使用一个HTML表格，其中'td'就是我用'p'标记的东西。对于任何愿意为此亵渎而贬低我的人，还请提供一个解决方案，可以在IE7中使用@Hayk添加的所有约束条件;） – FelipeAls 2012-04-16 22:44:49

我说服我的雇主说支持IE7会很贵。因为它是。 – 2012-04-16 23:31:20

表单项目的问题

回答

相关问题