Question

我有一个固定的顶层菜单，左边是图像，右边是输入，右边是另一个输入。我希望拉伸中心输入以填充图像和其他输入之间的所有剩余空间。

通常在语义上我会考虑一个流畅的输入，但这似乎并没有在语义菜单中起作用。当＆＃39;流动＆＃39;应用输入变小。

如何让中心输入拉伸到其他两个之间的全宽？有没有办法用semantic-ui来做到这一点？

  <div class="ui fixed borderless menu">

    <div class="header">
      <a href="/" class="">
        <img src="logo.png">
      </a>
    </div>

    <div class="item">
      <div class="ui left icon input">
        <i class="search icon"></i>
        <input type="text" placeholder="search">
      </div>
    </div>

    <div class="right item">
      <div class="ui left icon input">
        <i class="map outline icon"></i>
        <input type="text" placeholder="location">
      </div>
    </div>

  </div>

Answer 1

您可以为项目的css样式设置flex-grow为1。

<div class="category search item" style="flex-grow:1;">
    <div class="ui icon input">
        <input class="prompt" placeholder="Search..." type="text">
        <i class="search link icon"></i>
    </div>
    <div class="results"></div>
</div>

测试并使用语义UI 2.2.13

Answer 2

将元素的显示属性设置为display: inline-block。

将元素的宽度属性设置为相对值，即使用百分比而不是像素。

设置元素的宽度属性值，使它们加起来为100％。

从页面中删除任何额外的边距和/或填充。

* {
  margin:  0;
  padding: 0;
}

菜单中的semanti-ui流体全宽输入

2 个答案: