如何在react.js的语义ui中水平对齐网格中的单选按钮?

eblbsuwk  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(237)

我有两个单选按钮,我想使用网格从水平对齐它们 semantic-ui-react 包裹。我怎么做?这是我的组件代码。

import { Grid, Form } from "semantic-ui-react";

render() {
    return (
      <StyledForm id="form_container">
        <Grid>
          <Grid.Row>
            <Grid.Column width={3}>
              <input
                label="Client Name"
                value={this.props.clientName}
                onChange={this.setClientName}
              />
            </Grid.Column>
            <Grid.Column width={3}>
              <label htmlFor="status">{"Status"}</label>
              <Grid>
                 {" "}
                <input  // set this radio button and the below one horizontally
                  type="radio"
                  id="html"
                  name="status"
                  value="HTML"
                  onClick={() => this.setClientStatus("Active")}
                />
                  <label for="html">Active</label>
                 {" "}
                <input   //make it horizontally align with above one
                  type="radio"
                  id="css"
                  name="status"
                  value="CSS"
                  onClick={() => this.setClientStatus("InActive")}
                />
                  <label for="css">InActive</label>
              </Grid>
            </Grid.Column>
          </Grid.Row>
          <Grid.Row>
            {/* <InterfaceSelect
              isRequired
              name='apis_interface_id'
              label={translateText('Access Grants')}
              /> */}
          </Grid.Row>
          <Grid.Row>
            <ClientList />
          </Grid.Row>
        </Grid>
      </StyledForm>
    );
  }
}

谢谢你的帮助

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题