语义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演示