gpt4 book ai didi

html - 使用CSS网格布局,如何移动外壳密码旁边的 "checkbox"?

转载 作者:行者123 更新时间:2023-12-03 17:09:32 25 4
gpt4 key购买 nike

我是编程新手(使用在线类(class)学习)
我只是在测试并获得对 CSS 的“感觉”,我现在已经用了 2 天时间来尝试理解 CSS 网格,但是我在尝试解决这个小问题时遇到了困难。
首先,使用 CSS 进行布局有不同的方法,有推荐的方法吗? grid 是要走的路,还是 flex?
我正在尝试为我的一个元素设计登录表单,我快到了,但我不知道如何将复选框从一列移动到另一列。
Picture show what I mean.
我的 HTML:

.grid-container {
display: grid;
padding: 1em;
justify-content: center;
align-content: center;
}

form {
background: #2DA1A8;
padding: 2em;
display: grid;
grid-template-columns: auto auto;
}
<body>
<div class="grid-container">
<form action="">
<label for="username" class="user-name">Brukernavn</label>
<input type="text" class="username">

<label for="password" class="pass-word">Passord</label>
<input type="password" class="password">

<button class="login">Logg inn</button>

<label for="rpass" class="rem-pass">Husk passord</label>

<input type="checkbox" class="remember">
<label for="fpass" class="forgot">Glemt <a href="#">passord?</a></label>
</form>
</div>
</body>

最佳答案

放一个 <div>在您的复选框和标签周围:
为了将来引用,我强烈建议您通过 firebase 查看此视频:
https://www.youtube.com/watch?v=uuOXPWCh-6o
enter image description here

.grid-container {
display: grid;
padding: 1em;
justify-content: center;
align-content: center;
}

form {
background: #2da1a8;
padding: 2em;
display: grid;
grid-template-columns: auto auto;
}
  <form action="">
<div class="grid-container">
<label for="username" class="user-name">Brukernavn</label>
<input type="text" class="username">

<label for="password" class="pass-word">Passord</label>
<input type="password" class="password">

<button class="login">Logg inn</button>
<div>

<label for="rpass" class="rem-pass">Husk passord</label>
<input type="checkbox" class="remember">
</div>

<label for="fpass" class="forgot">Glemt <a href="#">passord?</a></label>
</div>
</form>


所做的唯一更改是:
  • 在表单内移动网格 div
  • 在 div 中环绕标签和复选框

  • Lykke直到!

    关于html - 使用CSS网格布局,如何移动外壳密码旁边的 "checkbox"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66562846/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com