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

SemanticUi：在菜单标题

1 个答案: