0

无论如何，我的页脚都保持在左侧。我使用了所有的 align 语句，justify 语句，但没有任何效果。我尝试使用间隙或边距将其隔开以位于中心，但这会导致响应问题。谁能帮助我或知道我能做什么？

这是我的 js 代码：

`从'react'导入反应；从“样式组件”导入样式；从'react-router-dom'导入{Link}；

import { Grommet as GrommetIcon } from 'grommet-icons';
import { Anchor, Box, Footer, grommet, Grommet, Main, Text, Heading, } from 'grommet';
import "./Footer.css";


const StyledAnchor = styled(Anchor)`
    font-weight: 200;
`;

const FooterAnchor = ({ ...rest }) => (
    <StyledAnchor href="/" color="white" {...rest} />
);

const FooterContent = () =>

    <Box gap=""  >
        <Box direction="row" align="center" gap="large" className="dropdown-content1" >
            <FooterAnchor href="/" className="FooterText"className="dropdown-Content"><Text size="xlarge" className="dropdown-Content">Home</Text></FooterAnchor>
        <Box direction="column" gap="small" >
            <FooterAnchor textAlign="center" href="/aboutus"  className="FooterText"><Text size="xlarge" >About Us</Text></FooterAnchor>
            <Box alignSelf="center">
            <FooterAnchor  href="/joinus" className="FooterText"><Text size="xlarge" >Join Us</Text></FooterAnchor>
            </Box>
        </Box>
            <FooterAnchor href="/events" className="FooterText"><Text size="xlarge" >Events</Text></FooterAnchor>
        <Box direction="column">
            <FooterAnchor href="/scholarships" alignSelf="center" className="FooterText"><Text size="xlarge">Scholarships</Text></FooterAnchor>
            <Box>
            <FooterAnchor href="/technicalscholarshipapp" alignSelf="center" className="FooterText"><Text size="xlarge" >Technical/Vocational Scholarship Application</Text></FooterAnchor>
            </Box>
            <Box>
            <FooterAnchor href="/universityscholarshipapp" alignSelf="center" className="FooterText"><Text size="xlarge" >Keith Skinner Memorial Scholarship Application</Text></FooterAnchor>
            </Box>
        </Box>
            <FooterAnchor href="/makeadonation" ><Text size="xlarge" >Make A Donation</Text></FooterAnchor>
            <FooterAnchor href="/contactus" ><Text size="xlarge" >Contact Us</Text></FooterAnchor>
        <FooterAnchor href="/login" ><Text size="xlarge" >Log In</Text></FooterAnchor>
        </Box>
    </Box>


    export const MainFooter = () => (
    <Grommet theme={grommet}>
        
        <Box flex />
            <Box className="mainfooter" alignSelf="center">
                    <Footer background="dark-1" pad="large" >
                        <FooterContent  />
                    </Footer>
                    <Footer
                    background="dark-2"
                    pad={{ horizontal: 'large', vertical: 'small' }}
                    >
                <Box direction="row" gap="small">
                    <Box >
                        <GrommetIcon color="#418ccd " />
                    </Box>
                        <Text alignSelf="center">SEEF</Text>
                </Box>
                    <Text textAlign="center" size="small">
                        © 2021 Copyright
                    </Text>
                </Footer>
            </Box>
    </Grommet>
    );

    MainFooter.storyName = 'MainFooter';

    export default {
    title: 'MainFooter',
    };
`

这是我的CSS：

`.mainfooter{
    width:100%;
    left:0;
    position: absolute;
    text-decoration: none;
  }



  @media (max-width: 920px){
    .mainfooter {
      width: 100%;
      margin: 0;
      text-align: center;
      line-height: 50px;
    }
  }
  
  @media (max-width: 500px){
    footer .footertext{
      position: fixed;
      top: 0;
      left: -100%;
      background: #555;
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: column;
      z-index: 99;
      transition: 0.5s linear;
    }
    footer .footertext.toggle{
      left: 0;
    }
    .mainfooter .footertext{
      line-height: normal;
    }
  
    .footertext{
      font-size: 1.4rem;
    }
  }`
4

0 回答 0