时间戳

首页 > 解决方案 > 使用 flexbox 在 body 中创建和放置按钮

css - 使用 flexbox 在 body 中创建和放置按钮

问题描述

您好，我创建了一个网站，但我的按钮有问题我认为这主要是因为我使用了<a>标签（我不可能从标签开始从头开始创建如果有人可以向我解释这种做事方式我'我很感兴趣，因为我已经尝试了很多次，现在对我来说不可能部分： https ://i.imgur.com/rajn8eU.png但我实际上有这种风格： https ://i.imgur.com/xbDuOe3.png

        ```<!DOCTYPE html>
        <html lang="en">
        
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Poseidon | The Perfect Discord Bot</title>
        
            <link rel="stylesheet" href="main.css">
            <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
        
        </head>
        
        <body>
        
            <header class="topbar">
                <a href="#"><img class="header-logo" src="img/logo.svg" alt="Poseidon Logo" href="index.html"></a>
                <nav>
                    <div class="middle">
                        <a href="invite.html">Invite</a>
                        <a href="commands.html">Commands</a>
                        <a href="documentation.html">Documentation</a>
                        <a href="premium.html">Premium</a>
                        <a href="support.html">Support</a>
                    </div>
                    <div class="login">
                        <a href="#" class="login_btn">Login</a>
                    </div>
                </nav>
            </header>
        
            <div class="circuit">
                <h1 class="header_title">The Perfect <br>Discord Music Bot.</h1>
                <h2 class="header_second_title">Poseidon is the only Discord bot you'll ever need!</h2>
                
                <a href="#" class="invite_btn">Invite</a>
                <a href="#" class="support_btn">Support</a>
        
            </div>
        
        
            <div class="dark">
                <h1>The Perfect Discord Bot.</h1>
                <h2>Poseidon is the only Discord bot you'll ever need!</h2>
        
                <h1>The Perfect Discord Bot.</h1>
                <h2>Poseidon is the only Discord bot you'll ever need!</h2>
        
                <h1>The Perfect Discord Bot.</h1>
                <h2>Poseidon is the only Discord bot you'll ever need!</h2>
            </div>
        
            <div class="circuit">
                <h1>The Perfect Discord Bot.</h1>
                <h2>Poseidon is the only Discord bot you'll ever need!</h2>
            </div>
        
            <div id="footer">
                <div class="logo">
                    <div class="flex">
                        <img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
                    </div>
        
        
                    <div class="copyright">&#169; Poseidon Bot 2012 - All Rights Reserved.</div>
                </div>
                <ul class="product">
                    <li><b>Product</b></li>
                    <li><a href="#">Invite</a></li>
                    <li><a href="#">Commands</a></li>
                    <li><a href="#">Premium</a></li>
                </ul>
                <ul class="resources">
                    <li><b>Resources</b></li>
                    <li><a href="#">Docs</a></li>
                    <li><a href="#">Provacy</a></li>
                    <li><a href="#">Refunds</a></li>
                </ul>
                <ul class="business">
                    <li><b>Business</b></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <div class="design">
                    designed with <span style="color: red;">&#10084;</span> by <span style="color: #00e09d;">My Discord
                        ID</span></div> <!-- Javascript clickable text // add function js -->
                <div class="social">
                    <a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" /></a>
                    <a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" /></a>
                    <a href="/"><img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" /></a>
                </div>
            </div>
        </body>
        
        </html>```
        


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    font-size: 16px;
    color: rgba(0, 0, .87);
    font-family: "Montserrat", sans serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    font-weight: 500;
    width: 100%;
}

.topbar {
    height: 80px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
    display: flex;
    align-items: center;
    width: 100%;
    background-image: url(img/background.svg);  
    background-color: rgba(62,62,62, 1);
}

.topbar nav {
    display: flex;
    width: 100%;
}

.middle {
  margin: 0 auto;
}

.topbar nav a {
    color: #9F9F9F;
    text-decoration: none;
    font-weight: 500;
    padding: 0 20px;
    display: inline-block;
    text-align: center;
    font-size: 21px;
}

.topbar nav a:hover, .topbar nav a.active {
    color: #94C8D0;
}


.header-logo {
  padding: 0px 20px;
    cursor: pointer;
    width: 25vh;
}


.login_btn {
  margin: auto 25px auto;
  background-color: #EEEEEE;
  color: #3b3b3b;
}

.circuit {
  background-image: url(img/background.svg);    
  background-color: rgba(62,62,62, 1);
  padding: 192px 0 112px;
}

.dark {
background-color: rgb(35,35,35);
padding: 192px 0 192px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.header_title {
  text-align: center;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 1000;
  font-size: 72px;
  word-spacing: 0px;
  margin: 0px;
  padding: 0px;
  letter-spacing: normal;
  line-height: 72px;
}

.header_second_title {
  text-align: center;
  color: #9F9F9F;
  font-family: 'Inter';
  font-size: 30px;
  margin: 16px 0px 0px;
  padding: 0px;
  line-height: 36px;
  font-weight: 500;
}

.header_btn {
  display: flex;
  justify-content: space-evenly;
}

.invite_btn {
  display: flex;
  justify-content: center;
  font-size: 24px;
  font-family: 'Inter';
  background-color: #1A9BB6;
  color: #ffffff;
  border: none;
  text-align: center;
  text-decoration: none;
  padding: 15px 32px;
}

.support_btn {
  display: flex;
  justify-content: center;
  font-size: 24px;
  font-family: 'Inter';
  background-color: #EEEEEE;
  color: #282828;
  border: none;
  text-align: center;
  text-decoration: none;
  padding: 15px 32px;
}

h1 {
  text-align: center;
  color: #9F9F9F;
}

h2 {
  text-align: center;
  color: #9F9F9F;
}

  #footer {
    font-family: sans-serif;
    display: grid;
    height: 20%;
    background-color: black;
    color: white;
    grid-template-rows: 1fr;
    grid-template-columns: 2fr .6fr .6fr 1fr;
    grid-template-areas: "logo product resources business" 
    "social . . design";
}
  
  li {
    list-style: none;
    padding-top: 8%;
    font-size: .9em;
    line-height: 1px;
}
  
  .flex {
    display: flex;
}
  
  #footer li a {
    color: rgb(22,145,176);
    text-decoration: none;
}
  
  .logo {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    grid-area: logo;
    padding-left: 1rem;
    padding-top: .5rem;
}
  
  .img {
    padding-top: .5rem;
    width: 25vh;
    cursor: pointer;
}
  
  .logo h4 {
    line-height: 1rem;
    margin-left: 2rem;
}
  
  .copyright {
    padding-top: .3rem;
    font-size: 1em;
    color: rgb(97,97,97);
}
  
  .product {
    grid-area: product;
    font-size: 20px;
    padding-top: .5rem;
}
  
  .resources {
    grid-area: resources;
    font-size: 20px;
    padding-top: .5rem;
}
  
  .business {
    grid-area: business;
    font-size: 20px;
    padding: 8px 0px 0px;
}

.social { 
    grid-area: social;
    padding-top: 1em;
    padding-left: 1em;
    cursor: pointer;
}

.design {
    grid-area: design;
    font-size: 1em;
    text-align: right;

为了训练自己，我决定复制这个网站： https ://hydra.bot/这个项目教会了我很多东西，尽管我当前的项目并不对应于 100%（对我来说非常复杂，目前要复制到 100% ），我特别在按钮上阻塞，所以如果有人可以帮助我，我有兴趣，提前谢谢你

标签： cssbuttonflexboxheader

解决方案

您需要将邀请和支持按钮包装在另一个具有 display flex 属性的 div 中。

如果你让 display flex 它不会对自己做任何事情，而是修改它的子组件

.container {
display: flex;
justify-content: center;
}
<div class='container'>
 <a href="#" class="invite_btn">Invite</a>
 <a href="#" class="support_btn">Support</a>
 </div>

推荐阅读