국경 px 문제

Question

현재 게시하는 각 직위 주위를 감싸는 1px 테두리가 있습니다. 내가 가지고있는 문제는 빨간 로고를 배치 한 바닥 부분에 1px의 겹침이 나머지 부분보다 두꺼운 선 (2px)을 만드는 것입니다. 어떻게이 문제를 해결할 수 있지만 각 페이지가 열릴 때 전체 테두리가 여전히 있습니다. 봐 주셔서 감사합니다.

http://jobspark.ca/job-listings/

업데이트] CSS

article .post { 
border: 1px solid #e3e3e3; 
border-top: none; 
} 

article.article-index-null .post, 
article.article-index-1 .post { 
border-top: 1px solid #e3e3e3; 
} 

UPDATE : 당신이 클릭하고 페이지 "부품 사람"예를 들어, 위의 경계가 누락을 열 때 한가지 지금 . http://jobspark.ca/job-listings/2013/6/3/wellsite-trailer-energy-services-technician

Answer 1

그냥 첫 번째를 제외하고 각 게시물에서 위쪽 테두리를 제거 :

article .post { 
    border: 1px solid #e3e3e3; 
    border-top: none; 
} 
article .post:first-child { 
    border-top: 1px solid #e3e3e3; 
} 

편집 : 당신의 HTML 구조 대신 일련의 각 (한 .post와 article 일련의 요소를 가지고 있기 때문에 .post 요소는 article으로 가정합니다. 위의 코드는 작동하지 않지만 원칙은 동일합니다. 첫 번째 자식 또 다른 형제 요소가 있기 때문에 당신은 article:first-child를 사용할 수 없지만 당신이 첫 번째 기사에게 특정 클래스의 이름을 부여했기 때문에 다음과 같이, 당신은 그것을 사용할 수 있습니다

article .post { 
    border: 1px solid #e3e3e3; 
    border-top: none; 
} 
article.article-index-1 .post { 
    border-top: 1px solid #e3e3e3; 
} 

두 번째 편집 : 귀하의 장치에 당신이 준보기, 또는

article .post { 
    border: 1px solid #e3e3e3; 
} 
.view-list article post { 
    border-top: none; 
} 
.view-list article.article-index-1 .post { 
    border-top: 1px solid #e3e3e3; 
} 

: 당신이 두 항목보기 및 목록 뷰에서 동일한 HTML을 재사용되지만 항목을보기에서 제거 위쪽 테두리를 원하지 않기 때문에는 다음과 같이 클래스 "article-index-null"기사에서 다음을 수행 할 수도 있습니다.

article .post { 
    border: 1px solid #e3e3e3; 
    border-top: none; 
} 
article.article-index-null .post, 
article.article-index-1 .post { 
    border-top: 1px solid #e3e3e3; 
} 

어느 쪽이든 작동해야합니다. 이것에

Answer 2

변경 :

article .post { 
    padding: 12px 16px; 
    border: 1px solid #e3e3e3; 
    border-bottom: none; 
    background: white; 
} 

그리고이 추가

article .post:last-child { 
    border-bottom: 1px solid #e3e3e3; 
} 

Answer 3

이 작업을 수행 할 수있는 몇 가지 방법이 있습니다. 나는 단지 1px 상단 테두리, 패딩이없는 <div>으로 전체 기사 섹션을 래핑합니다. 그러면 모든 기사는 앞으로 갈 모양을 얻기 위해 왼쪽, 오른쪽 및 아래쪽 테두리 만 필요할 것입니다.

article .post { 
padding: 12px 16px; 
border-left: 1px solid #e3e3e3; 
border-right: 1px solid #e3e3e3; 
border-bottom: 1px solid #e3e3e3; 
background: white; 
} 

Answer 4

경계선을 사용하는 대신 경계선 왼쪽 경계선과 경계선을 사용하는 것이 어떻습니까? 문제가 해결되었습니다.