image 和 h4 元素在 React 中没有并排出现 Material UI

Question

我在 uisng material ui 反应。试图将图像和 h4 相邻。但它们垂直对齐。我尝试调整宽度但没有用。

import React, { Component } from "react";
import robo from "./robo.png";
import { makeStyles } from "@mui/styles";
const useStyles = makeStyles({
  logo: {
    width: 100,
  },
  name: {
    width: 100,
  },
});
const Home = () => {
  const classes = useStyles();

  return (
    <div>
      <img alt="Gyrodata" src={robo} className={classes.logo} />
      <h4 className={classes.name}>Maersk Invincible</h4>
    </div>
  );
};

export default Home;

Answer 1

H4 是一个块级元素，这就是它移到下一行的原因。您可以使用 flex 使它们内联或使用 display 属性.

使 h4 成为内联元素

在下面的代码中，我使用 flex 使 children 出现在同一行中。您可以找到有关 flex here 的更多信息，并且现在所有主流浏览器都支持它。

Your updated code.

import React, { Component } from "react";
import robo from "./robo.png";
import { makeStyles } from "@mui/styles";
const useStyles = makeStyles({
  container: {
    display: 'flex',
  },
  logo: {
    width: 100,
  },
  name: {
    width: 100,
  },
});
const Home = () => {
  const classes = useStyles();

  return (
    <div className={classes.container}>
      <img alt="Gyrodata" src={robo} className={classes.logo} />
      <h4 className={classes.name}>Maersk Invincible</h4>
    </div>
  );
};

export default Home;

Answer 2

您需要为子元素设置显示或为父元素设置显示弹性。

   import React, { Component } from "react";
    import robo from "./robo.png";
    import { makeStyles } from "@mui/styles";
    const useStyles = makeStyles({
      logo: {
        width: 100,
display:"inline-block"
      },
      name: {
        width: 100,
display:"inline-block"
      },
    });
    const Home = () => {
      const classes = useStyles();
    
      return (
        <div>
          <img alt="Gyrodata" src={robo} className={classes.logo} />
          <h4 className={classes.name}>Maersk Invincible</h4>
        </div>
      );
    };
    
    export default Home;

image 和 h4 元素在 React 中没有并排出现 Material UI

image and h4 elements are not coming side by side in React Material UI

jsx

reactjs

material-ui