语义 Ui：菜单中的文件搜索输入 Header

Question

我在尝试将此搜索输入填充到整个宽度菜单时遇到问题，但 SemanticUI 对菜单项使用 flexbox。

    <div class="ui top attached teal inverted large menu">
    <div class="header item">Header</div>
    <div class="item">Item</div>
    <div class="ui search item">
            <div class="ui left icon large input">
            <input type="text" placeholder="search input">
            <i class="search link icon"></i>
            </div>
            <div class="results"></div>
        </div>
        <div class="right menu">
        <div class="item">
            <div class="ui primary button">Button1</div>
        </div>
        <div class="item">
            <div class="ui red button">
                Button2
            </div>
        </div>
    </div>
    </div>

http://codepen.io/anon/pen/BoGNvP

我觉得只能用javascript？还是有办法只用 css 来解决？

Answer 1

经过多次尝试和研究，这是我找到的最短的解决方案

.ui.menu .search {
  flex: 1;
}

http://codepen.io/anon/pen/qOQXjL

语义 Ui：菜单中的文件搜索输入 Header

SemanticUi: fill search input in Menu Header

html

css

semantic-ui