图片和 h4 元素在 React Material UI 中没有并排出现答案

【问题标题】：image and h4 elements are not coming side by side in React Material UI图片和 h4 元素在 React Material UI 中没有并排出现
【发布时间】：2021-12-24 19:19:35
【问题描述】：

我正在反应中使用材料 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;

【问题讨论】：

标签： reactjs material-ui jsx

【解决方案1】：

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

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

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;

【讨论】：

【解决方案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;

【讨论】：