Question

我花了两天的时间来实现一个简单的目标：在此布局的基线上对齐所有文本。在Grid元素上尝试了十二种alignItems组合，无济于事。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My page</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
    <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
    <!-- Fonts to support Material Design -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <!-- Icons to support Material Design -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
const {
  Grid,
  Button,
  ButtonGroup,
  Typography
} = MaterialUI;

function App() {
  return (
    <Grid container style={{ borderWidth: '1px', borderStyle: 'solid' }} justify="space-between">
      <Grid item xs={2}>
        <Button variant="outlined">Could</Button>
      </Grid>
      <Grid item xs>
        <Grid container spacing={1}>
          <Grid item>
            <Typography variant="h4">You</Typography>
          </Grid>
          <Grid item>
            <ButtonGroup>
              <Button variant="outlined">align</Button>
              <Button variant="outlined">this?</Button>
            </ButtonGroup>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
}

ReactDOM.render(
  <App />,
  document.querySelector('#root'),
);
    </script>
  </body>
</html>

Answer 1

找到了一种自己修复的方法！

所做的更改：

将alignItems =“ baseline”添加到两个容器网格中。
包装一个ButtonGroup中的第一个Button，使其与另一个ButtonGroup对齐（请参阅Material-UI Button and ButtonGroup do not align on the baseline以了解为什么这样做是必要的。）

不确定这是否是最好的方法，所以我暂时不提问题。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My page</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="minimum-scale=1, initial-scale=1, width=device-width"
    />
    <script
      src="https://unpkg.com/react@latest/umd/react.development.js"
      crossorigin="anonymous"
    ></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
    <script
      src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://unpkg.com/babel-standalone@latest/babel.min.js"
      crossorigin="anonymous"
    ></script>
    <!-- Fonts to support Material Design -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
    />
    <!-- Icons to support Material Design -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const { Grid, Button, ButtonGroup, Typography } = MaterialUI;

      function App() {
        return (
          <Grid
            container
            style={{ borderWidth: "1px", borderStyle: "solid" }}
            justify="space-between"
            alignItems="baseline"
          >
            <Grid item xs={2}>
              <ButtonGroup>
                <Button variant="outlined">Could</Button>
              </ButtonGroup>
            </Grid>
            <Grid item xs>
              <Grid container spacing={1} alignItems="baseline">
                <Grid item>
                  <Typography variant="h4">You</Typography>
                </Grid>
                <Grid item>
                  <ButtonGroup>
                    <Button variant="outlined">align</Button>
                    <Button variant="outlined">this?</Button>
                  </ButtonGroup>
                </Grid>
              </Grid>
            </Grid>
          </Grid>
        );
      }

      ReactDOM.render(<App />, document.querySelector("#root"));
    </script>
  </body>
</html>

Button，ButtonGroup和版式的Material-UI网格基线对齐

1 个答案: