HTML 입력 태그가 예기치 않게 CSS 눈금선을 이동합니다.

Question

문제를 단순화하기 위해 2x2 CSS 그리드 div가 있다고 가정해 보겠습니다. 아래 코드 조각에 표시된 대로 그리드 템플릿을 사용하여 이 4개 셀 내에서 3개의 div(클래스 이름: "btn", "title" 및 "info")의 크기를 조정했습니다. (세 번째 div class="info"를 유지하려면 두 번째 행의 2개 열을 병합하세요.)

첫 번째 div(class="btn")의 가로 세로 비율은 1/1입니다. 그래서 높이를 10vh로 설정하면 정사각형이 됩니다.

내 질문

문제는 마지막 div class="info"의 "input" 태그입니다. 태그를 입력하지 않으면 모든 것이 예상대로 작동합니다. 중간 격자선은 첫 번째 열의 최소 내용(grid-template-columns에 설정된 대로)을 따르며 가장 왼쪽 위치에 유지됩니다.

하지만 마지막 div에서 해당 입력 태그를 사용하면 그리드 중심선이 예기치 않게 이동합니다! 그리드의 두 번째 행에는 공간이 충분하고 이동하면 안 될 것 같아서 예상치 못한 결과입니다.

문제를 보려면 아래 코드 조각에서 입력 태그를 제거하고 차이점을 확인하세요.

으아악 으아악

Answer 1

align-self: start 添加到 info 클래스

만 추가하세요.

으아악 으아악

Answer 2

답을 찾았어요

입력 마크 너비 값을 설정해야 합니다. 임의의 비율로 설정했는데 아주 잘 작동합니다

으아악