带有css网格的按钮不能对齐

x7yiwoj4 于 2023-01-28 发布在其他

关注(0)|答案(1)|浏览(113)

我有一个非常简单的网站2个按钮，我需要在网站底部使用网格对齐。虽然调整-工作正常，对齐-根本不工作。你能帮我解决这个问题吗？谢谢提前很多!
我试过将高度设置为container以及. buttons和. next-button、. back-button。我试过将高度设置为display：Flex上的.按钮和.下一个按钮，.返回按钮太和对齐-只是不工作反正。
下面是我的HTML代码：

<!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>Shopping cart</title>
    <link rel="stylesheet" href="styles.css">


</head>
<body>
    <header>

    <div class="container">
    
        <div class="buttons">
        
            <a href='www.shopping.com' class="back-button">
            BACK</a>

            <a href='shopping-cart.php' class="next-button">
            NEXT</a>

        </div>
    </div>
    
    </header>

    <main>
    

    </main>

    <footer>

    <?php include "footer.php" ?>

    </footer>

    
</body>
</html>

这是我的CSS：

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

a {
    text-decoration: none;
    color: white;
    }

.container {
    width: 75vw;
    margin: 0 auto;
}


/******* Header *******/

header {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("img/macbook.jpg");
    background-size: cover;
    height: 100vh;
    background-attachment: fixed;
    color: white;
    position: relative;
   
}

.buttons {
    padding: 1vw;
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    justify-self: center;
    align-self: end;
} 

.next-button, .back-button {
    border: 3px dotted rgba(97, 136, 150, 0.959);
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    text-align: center;
    color: white;
    font-size: 15px;
    font-family: Arial;
    box-shadow: 12px 7px 12px rgba(128, 128, 128, 0.181);
    border-radius: 15px;
    background: linear-gradient(rgba(4, 65, 85, 0.2), #12688580);
}

.back-button:hover,
.next-button:hover,
.back-button:active,
.next-button:active {
transition: background 0.5s;
background: #6dc3e063;
}

css

来源：https://stackoverflow.com/questions/75202676/buttons-with-css-grid-wont-align

1条答案

按热度按时间

eit6fx6z1#

我给你的集装箱增加了高度和弹性

.container {
  width: 75vw;
  margin: 0 auto;
  height: 100%;
  display: flex;
}

还更新了宽度为100%的按钮类。

.buttons {
  padding: 1vw;
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  align-self: end;
}

这里是代码pen https://codepen.io/ignasb/pen/BaPYQbp：-）

赞(0）回复(0）举报 2023-01-28

我来回答

带有css网格的按钮不能对齐

1条答案

相关问题

热门标签

最新问答