Html 具有CSS表格布局属性的导航栏（表格单元格和表格行存在问题）

我正在尝试制作一个响应迅速的导航栏，左侧有不确定数量的链接，右侧有一个搜索按钮

链接应该是相等的宽度，无论有多少，搜索按钮应该是50像素宽。当屏幕宽度小于768px时，响应开始发挥作用

我正在使用CSS

表格布局：修复了
表格单元格
和
表格行
属性，具体取决于屏幕宽度

然而，Firefox和Chrome似乎做得不错，但Safari在宽窄屏幕上来回切换时，不知何故弄乱了这些等宽元素（即，元素首先是
表格单元格
，然后是
表格行
，然后又是
表格单元格
）

有人知道如何解决这个问题，或者想出更好的设计吗？或者这只是Safari 6.0.2的一个bug

jsiddle演示

. 
 我认为你不需要javascript

我刚刚为表单宽度添加了一个：hover，为输入添加了另一个：hover，它解决了safari上的问题，当您将文本输入悬停时，表单再次获得50px的宽度（如果您的问题是这样的话）

在JSFIDLE中尝试我的编辑

我的问题不在于形式。JS代码与此无关。因此，您的代码并没有解决最初的问题，即如果您前后横向调整JSHTML输出框架的大小，使列表元素得到表单元格和表行值，布局就会变得混乱。例如，在你的演示中尝试一下，效果还是一样的。
#searchform:hover {
width:250px;
}

#searchform:hover input#s {
display: inline;
}