가로 테두리에서 테두리 붕괴를 시뮬레이트합니다.

Question

가로 uli가 있고 li 요소는 검은 색 테두리 1 개를 가져옵니다. 두 개의 인접한 요소는 왼쪽 및 오른쪽 요소의 테두리가 병합되기 때문에 2 픽셀 테두리를 가져옵니다.

이 문제를 해결하기 위해 table border-collapse 속성을 시뮬레이션하는 트릭이 있습니까? 이처럼

Answer 1

:

<ul> 
    <li><a href="#">A Link</a></li> 
    <li><a href="#">A Link</a></li> 
    <li><a href="#">A Link</a></li> 
    <li><a href="#">A Link</a></li> 
</ul> 

CSS :

ul, li { 
    margin:0; 
    padding:0; 
    list-style:none 
} 

li { 
    float:left;  
}  

​ul li a { 
    display:block; 
    padding:3px; 
    border-top:1px solid #ff0000; 
    border-bottom:1px solid #ff0000; 
    border-right:1px solid #ff0000; 
} 

ul li:first-child a { 
    border-left:1px solid #ff0000 
}