행 개수를 모르고 마지막 열 여백을 제거하는 방법은 무엇입니까?

행 개수에 대한 지식 없이 마지막 열 여백 제거

웹 디자인에서는 모든 마지막 요소에 대해 올바른 여백을 제거하는 것이 바람직한 경우가 많습니다. 행. 이 작업은 행당 요소 수를 미리 결정할 수 없는 동적 행 길이를 처리할 때 어려워집니다.

음수 여백

이 효과를 얻는 한 가지 방법은 다음과 같습니다. 상위 컨테이너에 음수 여백을 추가합니다. 이는 자식 요소가 부모 요소 내에서 완벽하게 정렬되고 자식 요소 사이에 원하는 간격을 유지하는 듯한 착각을 불러일으킵니다.

ul {
    margin-left: -5px;
    margin-right: -5px;
}

li {
    margin-left: 5px;
    margin-right: 5px;
}

margin-left와 margin-right가 동일하게 적용되므로 두 LTR(왼쪽)을 모두 수용할 수 있습니다. -오른쪽으로) 및 RTL(오른쪽에서 왼쪽) 요소 위치 지정. 그러나 가로 스크롤을 방지하려면 Overflow-x:hidden을 추가해야 할 수도 있습니다.

미디어 쿼리

대체 솔루션은 미디어 쿼리를 사용하여 각 요소의 마지막 요소를 타겟팅하는 것입니다. 열. 이 접근 방식은 음수 여백을 사용하는 것보다 덜 간결하지만 스타일 조정을 더 효과적으로 제어할 수 있습니다.

@media (min-width: 400px) and (max-width: 499px) {
    li:nth-child(even) {
        margin-right: 0;
        border-right: none;
    }
}
/* ... */

다양한 화면 크기에 대한 미디어 쿼리를 지정하면 다양한 행 길이에 대한 마지막 요소 스타일을 정의할 수 있습니다.

위 내용은 행 개수를 모르고 마지막 열 여백을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!