小编olj*_*ljo的帖子

使用CSS网格布局,如何移动外壳密码旁边的“复选框”?

我是编程新手(使用在线课程学习)

我只是在测试并获得对 CSS 的“感觉”,我现在已经用了 2 天时间来尝试理解 CSS 网格,但是我在尝试解决这个小问题时遇到了困难。

首先,使用 CSS 进行布局有不同的方法,有推荐的方法吗?grid 是要走的路,还是 flex?

我正在尝试为我的一个项目设计登录表单,我快到了,但我不知道如何将复选框从一列移动到另一列。

图片显示我的意思。

我的 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;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

html css css-grid

5
推荐指数
1
解决办法
38
查看次数

标签 统计

css ×1

css-grid ×1

html ×1