0

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

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

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

请参阅下面的示例

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

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

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

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

4

2 回答 2

1

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

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

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

于 2013-10-16T13:15:53.180 回答
1

使用填充减小容器的宽度，并将搜索框绝对定位在填充内。这是一个关于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
    }

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

于 2013-10-16T13:27:06.790 回答