CSS에서 경계선이 사라지는 문제를 해결하는 방법

이번에는 CSS 경계선 사라짐 처리 방법을 알려드리겠습니다. CSS 경계선 사라짐 처리 시 주의사항은 무엇인지 살펴보겠습니다.

일부 navigation 열에서 흔히 볼 수 있는 아래 그림을 살펴보겠습니다. 각 행의 마지막 열의 오른쪽 테두리가 사라지는 것이 가장 편리하고 우아하게 구현되는 방법입니다. 모든 브라우저에서?

IE8-과 호환될 필요가 없다면 CSS3에 새로 추가된 selector를 사용하는 것이 의심할 여지 없이 좋은 방법입니다.

// 使用伪类选择器，选择第 3n 个元素去掉边框
li:nth-child(3n){ 
　　border-right:none; 
　　}

물론 숫자가 확실히 많지 않다면 오른쪽 테두리를 제거해야 하는 요소에 특정 클래스를 추가하기만 하면 됩니다. 또는 테이블을 사용하는 것이 좀 더 번거롭지만 그렇게 할 수도 있습니다.

하지만 이것만으로는 충분하지 않습니다.

여기에 역 테두리를 추가하고 음수 margin을 추가하는 약간의 트릭이 있습니다.

먼저 ul 구조가 다음과 같다고 가정합니다.

<p> 
    </p>

          
• 测试
          
• 消失
          
• 边界线
          
• 右侧
          
• 边界线
          
• 消失
          
• 测试
      

 

그림에 표시된 대로 각 행에 3개의 li이 있고 각 li의 너비는 100px이며 ul 및 ul-container 너비는 모두 다음과 같이 설정되어 있다고 가정합니다. 300px.

가장 중요한 것은 각 li가 오른쪽 테두리 대신 왼쪽 테두리를 설정한다는 것입니다.

.ul-container, 
 
　　ul{ 
 
　　width:300px; 
 
　　} 
 
　　li{ 
 
　　float:left; 
 
　　width:99px; 
 
　　border-left:1px solid #999; 
 
　　}

다음 결과를 얻습니다.

다음으로 컨테이너 ul-container를 overflow로 설정합니다. , 그리고 ul을 한 픽셀 왼쪽으로 margin-left:-1px 이동합니다.

이렇게 하면 ul의 첫 번째 열에 있는 모든 테두리가 왼쪽으로 한 픽셀 이동되어 오버플로 숨겨져서 다음 li의 오른쪽 테두리가 실제로는 왼쪽 테두리처럼 보입니다.

.ul-container{ 
 
　　overflow:hidden; 
 
　　} 
 
　　ul{ 
 
　　margin-left:-1px; 
 
　　}

효과 다이어그램은 초기 다이어그램에 표시된 것과 같습니다.

이 접근 방식은 li 개수와 행 개수가 다른 모든 상황에 적용할 수 있습니다. 이전 li 요소와 별개의 왼쪽 테두리는 시각적으로 이전 li 요소의 오른쪽 테두리처럼 보입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

스크롤 막대 스타일 설정

CSS 중심 레이아웃 요약

절대 위치에 있는 요소를 가로 및 세로 가운데에 맞추는 세 가지 방법

위 내용은 CSS에서 경계선이 사라지는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!