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

Question

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

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

我也在使用 CSStable-layout: fixed和table-cell属性table-row，具体取决于屏幕宽度。

然而，Firefox 和 Chrome 似乎还不错，但不知何故 Safari 在来回切换宽屏和窄屏时会弄乱那些等宽的元素（即元素先是table-cells然后table-rows再返回table-cells）。

有谁可以解决这个问题或者想出更好的设计？或者这只是一个 Safari 6.0.2 的错误？

JSFiddle Demo
在这里找到。

score 0 · Accepted Answer

我不认为你需要 javascript

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

#searchform:hover {
width:250px;
}

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

在 jsfiddle 中尝试我的编辑

1 回答 1