semantic-ui - 语义 Ui 菜单全宽项目

Question

我有一个带有简单菜单的应用程序，其中包含 3 个主要项目。标题项、搜索输入项和设置项。我这样定义菜单:

<div class="ui menu">
  <div class="left header item">

  </div>
  <div class="item">
    <div class="ui icon input">
      <input placeholder="Search..." type="text">
      <i class="search link icon"></i>
    </div>
  </div>
  <div class="right">

  </div>
</div>

问题是我希望中间项尽可能多地占据空间(即从第一项扩展到最后一项)。是否有允许元素尽可能多地占用空间的属性

Answer 1

这样的事情应该可以工作:

<div class="ui menu stackable">
    <div class="ui three column stackable grid container"  style="margin:0;">
        <a href="#" class="item three wide column">
            Home
        </a>
        <div class="ui search item ten wide column">
            <div class="ui icon input">
                <input class="prompt" type="text">
                <i class="search link icon"></i>
            </div>
            <div class="results"></div>
        </div>
        <div class="ui dropdown search item three wide column">
            <input type="hidden" value="en">
            <div class="default text">Something</div>
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item" data-value="1"><i class="en flag"></i>item 1</div>
                <div class="item" data-value="2"><i class="en flag"></i>item 2</div>
                <div class="item" data-value="3"><i class="en flag"></i>item 3</div>
            </div>
        </div>
    </div>
</div>

Jsfiddle demo