떠 다니는 하위에 반응이 축소 된 테두리

Question

축소 된 테두리가 테이블과 표 셀에 있지만 플로팅 된 div (또는 인라인 블록 div)를 사용하는 것과 동일한 효과를 얻으려고하지만 디자인도 반응적입니다. 마크 업이 조금 다음과 같습니다

는

<div class="parent"> 
    <div class="Lev1"> 
    label 
    </div> 
    <div class="Lev1"> 
    <div class="lev2">list item</div> 
    <div class="lev2">list item</div> 
    ..variable amount of Lev2 child divs 
    </div> 
</div> 

현재 나의 CSS는 모든 아이들이 수평 스택 만에 LEV2 아이들이 수직으로 쌓아 시작 크기를 전체 화면에서이

.parent { 
    width:100%; 
    border:1px solid #000; 
} 
.lev1 { 
float:left; 
border:0px; 
} 
.lev2 { 
float:left; 
border-right:1px solid #000; 
} 

같은과 누락 위쪽 및 아래쪽 테두리가 분명해진다. 나는 모든 자식 요소 주위에 1px 테두리를 놓고 테두리가 서로 얽히게 할 수 있기를 바랍니다.

나는 음수 여백을 사용하여 시도했지만 수직으로 두 배로 움직이기 시작합니다.

가능한지 확실하지 않은 사람에게 아이디어가있는 경우 좋을 것입니다.

Answer 1

정확히 무엇을 원하는지 확실하지 않지만 음수 여백을 사용하여 .lev2 div 테두리를 "축소"할 수있었습니다.

.lev2 { 
    float:left; 
    border:1px solid #000; 
    margin-top:-1px; 
    margin-left:-1px; 
} 

이 here