[css] CSS에서 “이중”테두리 방지

Program / 글쓴이

테두리 가있는 두 개의 div가 나란히 있다고 가정합니다 ( https://chrome.google.com/webstore/category/home 참조).

내 div가 이중 테두리처럼 나타나지 않도록 방지하는 방법 (가급적 CSS 트릭)이 있습니까? 내가 의미하는 바를 더 잘 이해하려면이 이미지를보십시오.

"이중"테두리

두 div가 만나는 곳에서 이중 테두리가있는 것처럼 보입니다.

답변

#divNumberOne { border-right: 0; }

답변

특정 순서로 표시 될 수없는 요소 (한 행에 3 개 요소, 2 개 요소가있는 행 등)에 대해 이야기하는 경우 컬렉션의 모든 요소에 배치 할 수있는 요소를 원합니다. . 이 솔루션은 다음을 포함해야합니다.

.collection {
    /* these styles are optional here, you might not need/want them */
    margin-top: -1px;
    margin-left: -1px;
}

.collection .child {
    outline: 1px solid; /* use instead of border */
    margin-top: 1px;
    margin-left: 1px;
}

개요는 이전 브라우저 (IE7 이하) 에서 작동하지 않습니다 .

또는 테두리를 유지하고 음수 여백을 사용할 수 있습니다.

.collection .child {
    margin-top: -1px;
    margin-left: -1px;
}

답변

HTML :

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

CSS :

div {
    border: 1px solid #000;
    float: left;
}

div:nth-child(n+2) {
    margin-left: -1px;
}

데모

IE8 지원을 위해 ie9.js 를 포함 합니다 (모든 CSS 선택자 / 의사 요소에 매우 유용합니다).

답변

고려할 수있는 또 다른 해결책은 CSS Adjacent 형제 선택기를 사용하는 것 입니다.

CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

답변

이것을 달성하기 위해 홀수 선택기를 사용할 수 있습니다.

.child{
   width:50%;
   float:left;
   box-sizing:border-box;
   text-align:center;
   padding:10px;
   border:1px solid black;
   border-bottom:none;
}
.child:nth-child(odd){
   border-right:none;
}
.child:nth-last-child(2),
.child:nth-last-child(2) ~ .child{
   border-bottom:1px solid black
}
<div>
    <div class="child" >1</div>
    <div class="child" >2</div>
    <div class="child" >3</div>
    <div class="child" >4</div>
    <div class="child" >5</div>
    <div class="child" >6</div>
    <div class="child" >7</div>
    <div class="child" >8</div>
</div>

스 니펫 확장

여기에 이미지 설명 입력

답변

div의 클래스 이름이 모두 동일한 경우 :

div.things {
    border: 1px solid black;
    border-left: none;
}

div.things:first-child {
    border-right: 1px solid black;
}

여기에 JSFiddle 데모가 있습니다.

답변

나는 쇼에 늦었지만 다음과 같이 outline 속성을 사용해보십시오.

.item {
  outline: 1px solid black;
}

CSS의 외곽선은 물리적 공간을 차지하지 않으므로 이중 테두리를 방지하기 위해 겹칩니다.