在导航栏中带有附加按钮的自动调整表单大小

Question

我一直在尝试通过多种不同的方式来做到这一点。我正在使用基础 6，虽然我无法找到负责的 css 值，但顶部栏 class 似乎阻止我正确使用基础列。

导航几乎是我想要的，我只希望搜索框自动调整大小，而不会将右侧的元素向下推。

这是一个代码笔，其中包含我尝试过的其他一些东西：http://codepen.io/anon/pen/MKPPzm （不知道为什么 "Logo" 没有正确对齐，但它在我的机器上工作）下面是 HTML

<header class="top-bar">
  <div class="row">
    <!-- LEFT- - - - - - - - - - - - - - - -->
    <div class="top-bar-title">Logo</div>
    <div class="top-bar-left">
      <div class="row">
        <div class="large-12 columns">
          <div class="row collapse">
            <div class="small-10 columns">
              <input class="topSearch" type="search" placeholder="Search">
            </div>
            <div class="small-2 columns">
            <button href="#" class="button searchButton"><a class="fa fa-caret-down searchCaret"></a></button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- RIGHT- - - - - - - - - - - - - - - -->
    <div class="top-bar-right">
      <!-- LINKS- - - - - - - - - - - - - - -->
      <ul class="menu navLinks">
        <li class="linkHome"><a href="#">Home</a></li>
        <li class="linkEvents"><a href="#">Events</a></li>
        <li class="linkProfile"><a href="#">Profile</a></li>
      </ul>
    </div>
  </div>
</header>

Answer 1

这就是我最终做的事情，尽管在 window 调整大小时，右上栏链接移动速度快于调整大小的速度时我遇到了一些问题，但大部分情况下都有效，这导致它们比我希望的更早发生碰撞。

<div class="top-bar-left">
  <div class="input-group">
    <input class="input-group-field topSearch" type="search" placeholder="Search">
    <div class="input-group-button">
      <button href="#" class="button searchButton" type="button" data-toggle="searchDrop"><a class="fa fa-caret-down searchCaret"></a></button>
    </div>
  </div>
</div>

和 CSS:

.top-bar .input-group-field { width: 100%; }
.top-bar-left { width: 45%; }

编辑："moving faster" 的修复是使用 width: calc(100% - [size of rest of container])

在导航栏中带有附加按钮的自动调整表单大小

autosizing form w/ attached button in the navbar

css

zurb-foundation

flexbox

zurb-foundation-6