时间戳

首页 > 解决方案 > 网格中的元素位置

grid - 网格中的元素位置

问题描述

我有一个三列网格。

在我的中心栏中，我有多个表单卡，我希望有一个“下一步”按钮，以显示下一个卡输入。

但我不知道为什么，“下一步”按钮通过我的卡。我需要提出一个立场：绝对，但我不喜欢它。

我如何才能为“下一步按钮”从卡中获取相对位置？

谢谢

这是codepen链接：https ://codepen.io/Beko6740/pen/xxqJVyg

<div class="wrapper">
<div class="form_level">The form level</div>

<div class="form">
    <form action="#" method="post">
        <div class="card" pannel="general">
            <p class="input_label">Firstname</p>
            <input type="text" name="firstname" required>

            <p class="input_label">Lastname</p>
            <input type="text" name="lastname" required>

            <p class="input_label">Predecessor</p>
            <input type="text" name="predecessor">
        </div>
    </form>

    <button class="card_next">Next</button>
</div>

<div class="form_summary">The summary of the form</div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
}

form {
    position: relative;
    padding: 15px;
    top: 50%;
    transform: translateY(-50%);
}

input:focus-visible {
    outline: none;
}

input {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid grey;
}

.input_label {
    margin-top: 15px;
    font-weight: 300;
}

.input_label:first-of-type {
    margin-top: 0px;
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100vh, auto);
    grid-column-gap: 10px;
}

.card {
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

.card_next{
    margin: 10px auto;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    background-color: white;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

在此处输入图像描述

红色：我的网格

绿色：我想要按钮的地方。

标签： gridposition

解决方案

我已经在表单和按钮中添加了display:flex;按钮......这是代码......

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
    }
    
    body {
        width: 100%;
        height: 100vh;
        background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
    }
    
    form {
        position: relative;
        padding: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    input:focus-visible {
        outline: none;
    }
    
    input {
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        border: 1px solid grey;
    }
    
    .input_label {
        margin-top: 15px;
        font-weight: 300;
    }
    
    .input_label:first-of-type {
        margin-top: 0px;
    }
    
    .wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(100vh, auto);
        grid-column-gap: 10px;
    }
    
    .card {
        width: 400px;
        margin: 0 auto;
        padding: 20px;
        background: #fff;
        border-radius: 15px;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    }
    
    .card_next {
        margin: 10px auto;
        width: 100px;
        height: 100px;
        border-radius: 100px;
        border: none;
        cursor: pointer;
        background-color: white;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    }
    
    .btn {
        display: flex;
        justify-content: center;
    }
<body>
    <div class="wrapper">
        <div class="form_level">The form level</div>

        <div class="form">
            <form action="#" method="post">
                <div class="card" pannel="general">
                    <p class="input_label">Firstname</p>
                    <input type="text" name="firstname" required>

                    <p class="input_label">Lastname</p>
                    <input type="text" name="lastname" required>

                    <p class="input_label">Predecessor</p>
                    <input type="text" name="predecessor">
                </div>

                <div class="btn">
                    <button class="card_next">Next</button>
                </div>

            </form>

        </div>

        <div class="form_summary">The summary of the form</div>
    </div>

</body>

推荐阅读