문제: 목록에 있는 각 행의 마지막 요소에서 여백을 제거하는 경우에도 마찬가지입니다. 행당 요소 수는 화면 크기에 따라 동적으로 변경됩니다.
도전 과제: :last-child { margin-right: 0 }와 같은 기존 CSS 여백 제거 기술은 최종 요소만 처리합니다. 목록 요소.
해결책:
개념: 상위 여백에 음수 여백 적용 하위 요소의 여백을 상쇄하는 요소.
예:
<code class="css">ul { margin-left: -5px; margin-right: -5px; } li { margin-left: 5px; margin-right: 5px; }</code>
개념: 미디어 쿼리를 사용하여 행당 요소 수를 기반으로 각 행의 마지막 요소를 타겟팅합니다.
예:
<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>
장점:
단점:
선택: 최상의 솔루션은 특정 설계 요구 사항과 유연성에 따라 다릅니다. 음수 여백은 더 간단하고 미디어 쿼리는 더 많은 제어를 제공합니다.
위 내용은 행의 마지막 요소에서 여백을 어떻게 동적으로 제거합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!