Question

我的应用程序标题。它是一个包含许多项目的菜单。我有一个menu.item包装输入字段（其目的是在站点范围内搜索给定的输入）。我希望menu.item与输入字段作为子节点的剩余空间一样宽。我的问题在视觉上与this非常相似。是的，我尝试了许多排列的流体道具，不幸的是它没有帮助。对此问题的任何帮助或见解？我的示例代码如下，相关代码为here。

<Menu inverted={true} fixed="top" size="small" color="violet">

  <Menu.Item as="a" header={true} >
    <Icon inverted={true} size="big" name="image" />
  </Menu.Item>

  <Container fluid={true}>
    <Menu.Item >
      <Input
        inverted={true}
        transparent={true}
        icon="search"
        iconPosition="left"
        placeholder="Search.."
      />
    </Menu.Item>
  </Container>

  <Menu.Item as="a" header={true} position="right">
    <Icon inverted={true} size="big" name="mail" />
  </Menu.Item>

</Menu>

Answer 1

语义UI在其响应式菜单上使用flexbox样式。这不是语义UI反应问题，而是CSS问题。我不相信语义UI样式中存在一个类来使菜单项增长。你必须用CSS来解决这个问题。它只需要一次改变。

CSS中Menu为display:flex。 Menu.Item组件都是子组件。内部搜索的应该将其添加为内联样式：style={{ flexGrow: 2 }}

您也不需要Container组件。这就是一切：

<Menu inverted={true} fixed="top" size="small" color="violet">
  <Menu.Item as="a" header={true}>
    <Icon inverted={true} size="big" name="image" />
  </Menu.Item>

  <Menu.Item style={{ flexGrow: 2 }}>
    <Input
      inverted={true}
      transparent={true}
      icon="search"
      iconPosition="left"
      placeholder="Search..."
    />
  </Menu.Item>

  <Menu.Item as="a" header={true} position="right">
    <Icon inverted={true} size="big" name="mail" />
  </Menu.Item>
</Menu>

这是一个有效的代码框示例：https://codesandbox.io/s/5x0x6ppm3k

如何使用semantic-ui-react在顶层菜单中的菜单项内创建尽可能宽的输入字段

1 个答案: