18910140161

CSS-将元素对齐到页面右侧

顺晟科技

2021-07-21 10:59:31

172

我在将元素对齐到页面右侧时遇到了一个问题,因为我确实使用了几种方法,如float、flex,但都不起作用。为了更容易理解,我把图片包括在内,这样它就可以描述我的意思。我不知道我的代码有什么问题,有人能帮我解决这个问题吗?感谢您的帮助

home.js:

import React from 'react';
import "./homeStyle.css";
import { Navbar, NavItem, NavDropdown, MenuItem, Nav, Form, FormControl, Button } from 'react-bootstrap';
import "./components/containers/Menu.css";
import "./homeScript";
import { Widget } from '@typeform/embed-react'
import logo from "./components/img/logo.png";

export default function Home() {
    return(
        <div>
        <div className='App tc f3'>
               <Navbar bg='dark' expand='lg'>
                 <Navbar.Brand href="">
                    <img src={logo}/>
                 </Navbar.Brand>
                 <Navbar.Toggle aria-controls="basic-navbar-nav" />
                 <Navbar.Collapse id="basic-navbar-nav">
                   <Nav className='ml-auto'>
                     <Nav.Link href="#home"><button type="button">Login</button></Nav.Link>
                   </Nav>
                 </Navbar.Collapse>
               </Navbar>
             </div>
              <section id="home">
              <div className="inner-width">
                <div className="content">
                  <h1 />
                  <div className="buttons">
                    <button>Not Prepare to Part Yet? Click to Learn More</button>
                  </div>
                </div>
              </div>
            </section>
          </div>
    )
}

CSS:

*{

margin: 0;
  padding:0;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  box-sizing: border-box;
}
#home .inner-width {
  display: flex;
  align-items: center;
  justify-content: right;
  height: ;
  text-align: center;
}

#home .content {
  width: ;
  color: white;
  float: right;
}

#home .content h1 {
  font-size: 60px;
  margin-bottom: 60px;
}

#home .content h1::after {
  content: " Family ";
  animation: textAnim 10s linear infinite;
}

@keyframes textAnim {
  25% {
    content: " If not Now, When ? ";
  }
  50% {
    content: " Just in case. ";
  }
  75% {
    content: " For your loved one.";
  }
}

顺晟科技:

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航