导航链接上的响应式填充答案

【问题标题】：Responsive padding on navigation links导航链接上的响应式填充
【发布时间】：2013-10-24 15:00:48
【问题描述】：

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

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

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

请看下面的例子

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

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

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

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

【问题讨论】：

这里给出的答案非常好，但他们并没有完全回答我想要做的事情。导航链接最终看起来没有对齐，因为它们每个都有相同的宽度，但按钮内的文本长度不同。我的问题可能措辞不佳，所以我为此找借口。只是让大家知道我为什么没有选择最佳答案。我最终只是给链接一个固定的填充，并根据屏幕大小使用媒体查询进行更改。

标签： html css navigation padding percentage

【解决方案1】：

使用内边距减小容器的宽度，并将搜索框绝对定位在内边距内。这是example on 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
    }

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：