HTML/CSS 中的按钮溢出

Question

我遇到按钮从容器溢出的问题。我向按钮添加了

width: 100%

但没有任何帮助。

body{
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: lightgray;
}

.container {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 35px;
    width: 500px;
    padding: 60px;
    background: #fff;
    border: 2px solid #DBDBDB;
    border-radius: 20px;
}



.socialLogin {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.socialLogin > button {
    padding: 10px 70px;
}

<div class="container">
    <div class="socialLogin">
        <button><a href="#"><img src="./assets/apple.png"></a></button>
        <button><a href="#"><img src="./assets/facebook.png"></a></button>
        <button><a href="#"><img src="./assets/google.png"></a></button>
    </div>
</div>

Answer 1

您正在设置容器类的宽度。删除它就可以了。