CSS 그리드 레이아웃을 사용하여 껍질 암호 옆에있는 "확인란"을 이동하는 방법은 무엇입니까?
기름
프로그래밍이 처음입니다 (온라인 과정을 사용하여 학습).
나는 단지 CSS를 테스트하고 "느낌"을 얻는 중이다. 나는 이제 CSS 그리드를 이해하기 위해 이틀을 사용했지만이 작은 문제를 해결하기 위해 노력하고있다.
첫째, CSS로 레이아웃을 만드는 방법에는 여러 가지가 있습니다. 권장되는 방법이 있나요? 그리드가 갈 길입니까, 아니면 플렉스입니까?
내 프로젝트 중 하나에 대한 로그인 양식을 디자인하려고하는데 거의 다 왔지만 확인란을 한 열에서 다른 열로 이동하는 방법을 알 수 없습니다.
내 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> Stanley
을 넣어 <div>당신의 체크 박스 및 라벨 주위 :
나중에 참고할 수 있도록 firebase의이 동영상을 확인 하시기 바랍니다 . https://www.youtube.com/watch?v=uuOXPWCh-6o
.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의 서라운드 레이블 및 확인란
행운을 빕니다!
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
몇 마디 만하겠습니다