3

我一直在尝试用很多不同的方式来做到这一点。我正在使用基础 6，尽管我无法找到负责的 css 值，但似乎顶栏类阻止了我正确使用基础列。

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

这是一个代码笔，其中包括我尝试过的许多其他东西： http ://codepen.io/anon/pen/MKPPzm （不知道为什么“徽标”没有正确对齐，但它在我的机器上工作）下面是 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>
4

1 回答 1

1

这就是我最终做的事情，尽管我遇到了一些问题，即右上角的链接移动速度比调整窗口大小时表单的大小要快，这导致它们碰撞比我想。

<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%; }

编辑：修复“移动得更快”是使用宽度：计算（100％ - [容器其余部分的大小]）

于 2016-02-09T02:23:04.647 回答