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

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

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

  1. import { Grid, Form } from "semantic-ui-react";
  2. render() {
  3. return (
  4. <StyledForm id="form_container">
  5. <Grid>
  6. <Grid.Row>
  7. <Grid.Column width={3}>
  8. <input
  9. label="Client Name"
  10. value={this.props.clientName}
  11. onChange={this.setClientName}
  12. />
  13. </Grid.Column>
  14. <Grid.Column width={3}>
  15. <label htmlFor="status">{"Status"}</label>
  16. <Grid>
  17.  {" "}
  18. <input // set this radio button and the below one horizontally
  19. type="radio"
  20. id="html"
  21. name="status"
  22. value="HTML"
  23. onClick={() => this.setClientStatus("Active")}
  24. />
  25.   <label for="html">Active</label>
  26.  {" "}
  27. <input //make it horizontally align with above one
  28. type="radio"
  29. id="css"
  30. name="status"
  31. value="CSS"
  32. onClick={() => this.setClientStatus("InActive")}
  33. />
  34.   <label for="css">InActive</label>
  35. </Grid>
  36. </Grid.Column>
  37. </Grid.Row>
  38. <Grid.Row>
  39. {/* <InterfaceSelect
  40. isRequired
  41. name='apis_interface_id'
  42. label={translateText('Access Grants')}
  43. /> */}
  44. </Grid.Row>
  45. <Grid.Row>
  46. <ClientList />
  47. </Grid.Row>
  48. </Grid>
  49. </StyledForm>
  50. );
  51. }
  52. }

谢谢你的帮助

暂无答案!

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

相关问题