행 크기가 다를 때 행의 마지막 요소에서 여백을 제거하는 방법은 무엇입니까?

행의 마지막 요소에서 여백을 제거하는 방법(행 크기에 관계 없음)

여러 요소가 연속적으로 있는 상황에서 , 행당 요소 수는 동적으로 달라질 수 있으므로 순수 CSS를 사용하면 각 행의 마지막 요소에서 여백을 제거하는 것이 어려울 수 있습니다.

음수 여백 사용

하나 효과적인 기술은 상위 요소에 음수 여백을 사용하는 것입니다. 이렇게 하면 자식 요소가 부모 요소 사이에 간격을 유지하면서 완벽하게 들어맞는 듯한 착각이 들게 됩니다.

<code class="css">ul {
    margin-left: -5px;
    margin-right: -5px;
}

li {
    margin-left: 5px;
    margin-right: 5px;
}</code>

여백을 분할하여 양쪽에 적용하면 특히 호환성이 필요한 디자인의 경우 더 나은 결과를 얻을 수 있습니다. 왼쪽에서 오른쪽(LTR) 및 오른쪽에서 왼쪽(RTL) 방향을 모두 사용합니다.

미디어 쿼리 활용

또 다른 접근 방식은 특정 화면 크기 내에서 행당 요소 수는 미디어 쿼리를 사용하여 nth-child()를 사용하여 행의 마지막 요소를 대상으로 지정하는 것입니다. 이 방법을 사용하면 보다 구체적인 스타일 조정이 가능합니다.

<code class="css">@media (min-width: 400px) and (max-width: 499px) {
    li:nth-child(even) {
        margin-right: 0;
        border-right: none;
    }
}

@media (min-width: 500px) and (max-width: 599px) {
    li:nth-child(3n+3) {
        margin-right: 0;
        border-right: none;
    }
}

/* Add more media queries as needed... */</code>

위 내용은 행 크기가 다를 때 행의 마지막 요소에서 여백을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!