html - 导航链接上的响应式填充

Question

我有一个导航栏，它由两部分组成。左侧区域，即实际链接所在的区域。右侧区域，即显示搜索框的区域。

左侧区域是流动的，而右侧区域是固定宽度的。

我想弄清楚的是如何在我的导航链接上设置填充，以便它会用完左侧区域的全部流体宽度。 (导航链接是具有悬停效果的按钮，我希望它们覆盖整个导航栏，无论其宽度如何)

看下面的例子

我正在尝试做什么(基于条宽度的基于流体/百分比的填充)

  width 300px
|========================================|========|
|---Link------Link------Link------Link---| Search |
|========================================|========|

  width 400px
  - padding on Links automatically adjusts to fill the bar
|================================================|========|
|----Link--------Link--------Link--------Link----| Search |
|================================================|========|

我将如何实现这一目标？我试过弄乱填充百分比，但我似乎无法让它按预期工作。填充百分比甚至是解决此问题的最佳方法吗？

Answer 1

根据您想要的支持级别，您可以使用 flexboxes。

不过，我假设您想支持旧版浏览器，最好的解决方案可能是正常的 2 列布局，左列内的链接获得百分比宽度(在您的示例中为 25%)，并且可能是最小宽度。

这是一个 working fiddle .我使主框可调整大小以便于演示。