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

根据您所需的支持级别，您可以使用flexbox。

我只是假设你想支持旧的浏览器，其中最好的解决方案是普通的2列布局，左栏内的链接得到百分比宽度（在你的例子中为25％），并且可能是min-width。

继承人working fiddle。我让主框可以调整大小以便于演示。

Answer 2

使用填充减小容器的宽度，并将搜索框绝对放在填充内。这是一个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 个答案: