:last-child 없이 행의 마지막 요소에서 여백을 제거하는 방법은 무엇입니까?

행의 마지막 요소에서 여백 제거

행의 마지막 요소에서 여백을 제거하는 것은 웹 디자인에서 일반적인 과제입니다. :last-child를 사용하면 목록의 마지막 요소에서 여백을 제거할 수 있지만, 이 접근 방식은 요소의 크기가 동적으로 조정되거나 행당 요소 수가 알 수 없는 경우에는 적합하지 않습니다.

음수 여백

한 가지 해결책은 상위 요소에 음수 여백을 사용하는 것입니다. 이 접근 방식은 개별 요소 사이의 간격을 유지하면서 하위 요소가 상위 요소 내에 맞는 듯한 착각을 불러일으킵니다.

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

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

그러나 이 기술에는 가로 스크롤을 방지하기 위해overflow-x:hidden과 같은 추가 스타일이 필요할 수 있습니다. .

미디어 쿼리

행당 요소 수를 예측할 수 있는 경우 미디어 쿼리는 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;
    }
}

@media (min-width: 600px) and (max-width: 799px) {
    li:nth-child(4n+4) {
        margin-right: 0;
        border-right: none;
    }
}</code>

사용되는 특정 n번째 하위 선택기는 행당 요소 수에 따라 달라집니다.

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