时间戳

首页 > 解决方案 > 如何在 React UI Semantic 中设置样式、对齐内容

css - 如何在 React UI Semantic 中设置样式、对齐内容

问题描述

我无法理解如何使用 React Semantic UI 工具包中的样式参数对齐内容。

我已经定义了样式参数，如下所示：

var styles = {
  navBar: {
    backgroundColor: 'dark blue'
  },
  left: {
    textAlign: 'left'
  },
  rightNav: {
  },
  verticalLine: {
  },
};

下面是我的代码的一部分，它生成复选框和标签。我需要将这些标签与它们和复选框之间的填充左对齐。

<Form.Field>
                     <React.Fragment>
                             <List horizontal style={styles.left}>
                            {
                              womensBoutiqueOptions.map(item => (

                                <List.Item key={item.key}>
                                        <List.Content>
                                          <List.Header>
                                              {item.text}
                                          </List.Header>


                                       <Checkbox2 name={item.value} checked={this.state.checkedItems.get(item.value)} onChange={this.handleChange} />

                                  </List.Content> 
                                </List.Item>
                              ))
                            }
                          </List>
                    </React.Fragment>
                </Form.Field>

这是输出。 在此处输入图像描述 上面的代码使用语义 UI 提供的List组件。第二个复选框列表是使用 ul HTML 标签生成的，如屏幕截图所示。

任何帮助将不胜感激。

标签： cssreactjssemantic-ui-react

解决方案

在语义 UI 复选框中，其标签不应由 List.Header 分隔：

JSX

<List horizontal>
    <List.Item>
      <Checkbox label='Make my profile visible' />
    </List.Item>
    <List.Item>
      <Checkbox label='Make my profile visible' />
    </List.Item>
    <List.Item>
      <Checkbox label='Make my profile visible' />
    </List.Item>
    <List.Item>
      <Checkbox label='Make my profile visible' />
    </List.Item>
    <List.Item>
      <Checkbox label='Make my profile visible' />
    </List.Item>
    <List.Item>
      <Checkbox label='Make my profile visible' />
    </List.Item>
  </List>

CSS

.ui.checkbox label:before,
.ui.checkbox label:after{
  right: 0px;
  left: auto;
}

.ui.checkbox label {
  padding: 0;
  padding-right: 24px;
}

演示：https ://codesandbox.io/s/jlzrplm81w

推荐阅读