Question

我一直试图以不同的方式做到这一点。我使用的是基础6，虽然我无法找到负责的css值，但顶级类似乎阻止我正确使用基础列。

导航几乎是我想要的，我只想让搜索框自动进行自动调整，而不是将右侧的元素向下推。

这是一个包括我试过的其他东西的代码：http://codepen.io/anon/pen/MKPPzm （不知道为什么＆＃34; Logo＆＃34;没有对齐，但它适用于我的机器）下面是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

这就是我最终要做的事情，这在大多数情况下是有效的，尽管我在顶部栏右键链接移动得比调整窗口大小时调整窗体大小时出现问题，这会导致它们比我想要的更早碰撞。

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

编辑：修复“移动速度更快”是使用width：calc（100％ - [容器剩余大小]）

自动调整表格，带有导航栏中的附加按钮

1 个答案: