导航链接上的响应式填充

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

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

我只是假设您想支持较旧的浏览器，其中最好的解决方案可能是正常的 2 列布局，左列内的链接获得百分比宽度（在您的示例中为 25%）和可能的min-width。

这是一个工作的小提琴。我使主框可调整大小以便于演示。

Answer 2

用填充减小容器的宽度，并将搜索框绝对放置在填充内。这是jsbin上的一个例子

HTML（请注意，一些空格已被故意删除，以便没有文本节点占用空间。

  <nav class="">
    <div class="nav-link-container">
            <div class="nav-link"><a >link</a>
      </div><div class="nav-link"><a >link</a>
      </div><div class="nav-link"><a >link</a>
      </div><div class="nav-link"><a >link</a>
      </div>
    </div><div class="search-box-container">
      <input class="search-box" placeholder="search">
    </div>
  </nav>

.CSS：

nav {
  padding-right: 220px;
  position: relative;
  background: lightblue;
  line-height: 1.5em;
}
  .nav-link-container {
    display: inline-block;
    width: 100%;
    text-align: center;
  }
    .nav-link {
      display: inline-block;
      width: 25%;
      outline: 1px dashed grey;
    }
  .search-box-container {
    position: absolute;
    right: 0;
    top:0;
    width: 210px;
    display: inline-block;
  }
    .search-box {
      width: 200px;
      border-radius: 5px;
      border: 1px solid lightgrey;
      padding-left: 5px
    }

注意：我只使用大纲来显示链接的位置，在实践中你不会这样做。