时间戳

首页 > 解决方案 > 如何将 FAB（材质 UI）应用到 CSS 网格中的 2 列？

css - 如何将 FAB（材质 UI）应用到 CSS 网格中的 2 列？

问题描述

如何让零按钮跨越 2 列，使其比其行中的其他按钮大？我希望它是一个更大的椭圆形。谢谢你的帮助。

import "./styles.css";
import Button from '@mui/material/Button';
import Fab from '@mui/material/Fab';

export default function App() {
  
  return (
    <div className="App">
      <div className = "blank"> </div>
      <div className = "btn-container-div"> 
      <div className = "screen-div"> </div>
      
      <div className = "row"> 
      <Fab> AC </Fab>
      <Fab> +/- </Fab>
      <Fab> &#37; </Fab>
      <Fab> &#247; </Fab>
      </div>
      <div className = "row"> 
      <Fab> 7 </Fab>
      <Fab> 8 </Fab>
      <Fab> 9 </Fab>
      <Fab> &#215; </Fab>
      </div>
      <div className = "row"> 
      <Fab> 4 </Fab>
      <Fab> 5 </Fab>
      <Fab> 6 </Fab>
      <Fab> &#247; </Fab>
      </div>
      <div className = "row"> 
      <Fab> AC </Fab>
      <Fab> +/- </Fab>
      <Fab> % </Fab>
      <Fab> &#8722; </Fab>
      </div>
      <div className = "row"> 
      <Fab> 0 </Fab>
      <Fab> . </Fab>
      <Fab> &#61; </Fab>
      </div>

      </div>
      
    </div>
  );
}
.App {
  display: grid;
  background:black;
  height: 150vh;
  width: 100vh;
  margin: auto;
  grid-template-rows: 2fr 10fr;
}

.blank {
  background: red;
}

.btn-container-div {
  background: blue;
  display: grid;
  grid-template-rows: repeat(6,1fr);
  
}

.screen-div {
  background: white;
}

.row{
  background: black;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  justify-items: center;
}

如何让零按钮跨越 2 列，使其比其行中的其他按钮大？我希望它是一个更大的椭圆形。谢谢你的帮助。

标签： cssreactjsmaterial-ui

解决方案

我修好了它。我在 fab 中添加了一个 className，然后在 css 中做了 grid-column: span 2。

推荐阅读