css - 使用语义 UI 反应垂直对齐项目

Question

我正在编写这样的代码semantic-ui-react：

import styled from 'styled-components'
import { Grid } from 'semantic-ui-react'

const StyledMultiselect = styled(Multiselect)`
  width: 20em !important;
`

<Grid>
    <Grid.Row>
      <Grid.Column width={6}>
        <InlineHeader content="Add Project:" />
        <StyledMultiselect
          placeholder="Select project"
          onChange={(v) => addElement(processAddedElement ? processAddedElement({ key: v }) : v)} 
          options={projectNames}
          inline
        />
      </Grid.Column>
      <Grid.Column width={6}>
        <InlineHeader content="Add Project Group:"/>
        <StyledMultiselect
          placeholder="Select project group"
          onChange={(v) => addProjectGroup(v, addElement)}
          options={projectGroupNames}
          inline
        />
      </Grid.Column>
    </Grid.Row>
  </Grid>

在哪里InlineHeader：

export const InlineHeader = styled(({ marginTop, ...props }) => <Header {...props} />)`
  display: inline-block;
  margin-right: 1em !important;
  margin-top: ${props => props.marginTop || "0em"} !important;
  margin-bottom: 0 !important;
  
  .sub.header {
    display: inline-block !important;
    margin-left: 0.5em !important;
  }

我看到的是以下内容：

我希望标题和选择字段垂直对齐。我可以使用属性将它们放置在不同的位置InlineHeader并对齐它们，但是屏幕调整大小的行为要糟糕得多，并且它们的水平间隔太远。如果它们合二为一，则应用于不起作用。我尝试输入和应用样式，但这也不起作用。应用or不起作用。关于如何将它们垂直对齐的任何想法？StyledMultiselectGrid.ColumnmarginTopGrid.ColumnmarginTopInlineHeaderInlineHeaderspanmarginToppaddingTopStyledMultiselectGrid.Column

更新

我注意到在添加( ) 之前定位是正确multiple的，因此以下内容垂直定位正确：semantic-ui-react Form.DropdownStyledMultiselect

<Form.Dropdown
  placeholder="Select project"
  inline
  selection
/>

但是如果我们添加multiple它，它会在垂直位置向下滑动（见上面的截图）：

<Form.Dropdown
  placeholder="Select project"
  inline
  selection
  multiple
/>

标签： cssstyled-componentssemantic-ui-react

Answer 1

问题在于 SUI 的原始 CSS 中的多选类型输入，而不是 React 类名中的输入。看起来你正试图与那些人作斗争以完成这项工作。只需更改一行 CSS 即可为您解决此问题。它还涉及<label>为该输入使用正确的可访问标记，而不是使用 Header 组件。

.ui.form .inline.field > .multiple.selection.dropdown {
  vertical-align: middle;
}

这是一个带有单行 CSS 修复的代码框，您可以根据需要将其应用到项目中，具体取决于您处理样式的方式。