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

语义Ui菜单全宽项目

1 个答案: