몇 가지 흥미로운 CSS 주제에 대해 이야기해 보겠습니다. (7) – 경계선이 사라지는 문제

CSS문제 해결 시 호환성은 고려되지 않습니다. 질문이 거칠고 제약이 없습니다. 문제 해결에서 익숙하지 않다고 생각되는 CSS 속성이 있으면 빨리 공부하세요. .

계속 업데이트하고, 계속 업데이트하고, 계속 업데이트하고, 중요한 것을 세 번 말하세요.

흥미로운 CSS 주제에 대해 이야기해 보세요(1)-왼쪽에 수직 막대를 구현하는 방법

흥미로운 CSS 주제에 대해 이야기하기(2) - 줄무늬 테두리 구현에서 상자 모델에 대해 이야기하기

흥미로운 CSS 주제에 대해 이야기해 보세요(3) - 스택 순서와 스택 컨텍스트에 대해 얼마나 알고 있나요

흥미로운 CSS 주제에 대해 이야기하기(4) - 리플렉션부터 시작하여 CSS 상속에 대해 이야기

흥미로운 CSS 주제에 대해 이야기하기(5)-한 줄을 중앙에 배치하고, 두 줄을 중앙에 배치하고, 두 줄 이상을 생략합니다

몇 가지 흥미로운 CSS 문제에 대해 이야기해 보세요(6) - 완전히 호환되는 다중 열 균일 레이아웃 문제

모든 주제는 내 Github에 요약되어 있습니다.

7. 경계가 사라지는 문제

일부 내비게이션 바에서 흔히 볼 수 있는 아래 그림을 보세요. 각 행의 마지막 열의 오른쪽 테두리가 사라져야 합니다. 어떻게 하면 가장 편리하고 우아하게 구현할 수 있을까요? 브라우저?

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

IE8-

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

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

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

여기서 약간의 트릭은 반전된 테두리를 추가하고 음수를 추가하는 것입니다

.

margin

먼저

가 다음과 같이 구성되어 있다고 가정합니다.

ul

<div class="ul-container">
    <ul>
        <li>测试</li>
        <li>消失</li>
        <li>边界线</li>
        <li>右侧</li>
        <li>边界线</li>
        <li>消失</li>
        <li>测试</li>
    </ul>
</div>

그림과 같이 각 행에 3개의

이 배열되어 있다고 가정하면 각

너비 는 ul 및 ul-container 너비가 모두 li로 설정됩니다. li100px 300px

가장 중요한 것은 각

이 오른쪽 테두리 대신 왼쪽 테두리를 설정한다는 것입니다. li

.ul-container, 
ul{
  width:300px;
}

li{
  float:left;
  width:99px;
  border-left:1px solid #999;
}

다음과 같은 결과를 얻게 됩니다.

다음으로 컨테이너

를

로 설정하고 왼쪽으로 한 픽셀 ul-container 이동합니다. overflow:hiddenul margin-left:-1px이런 식으로

에 있는 첫 번째 열의 모든 테두리가 왼쪽으로 한 픽셀 이동되어

되어 사라지고 다음 의 오른쪽 테두리가 다음과 같이 보입니다. 왼쪽 테두리는 사실 은폐일 뿐입니다. uloverflow:hidden li

렌더링은 처음에 표시된 것과 같습니다.

데모로 찔러보기

이 접근 방식은 이 li 개수와 행 개수가 다른 모든 상황에 적용할 수 있습니다. 새로 추가된 각 li은 이전과 유사한 왼쪽 테두리를 생성하기 때문입니다. li 요소는 분리되어 있으며 시각적으로 이전 li 요소의 오른쪽 테두리처럼 보입니다.

모든 주제는 내 Github에 요약되어 있으며 더 많은 교류가 있기를 바라며 블로그에 게시되었습니다.

아직 궁금한 점이나 제안사항이 있으면 더 많은 내용을 소통할 수 있습니다. 글의 내용이 제한되어 있고 잘못된 부분이 있으면 이 글을 마치겠습니다. 기사로 알려주세요.